普段ネットを使用されている多くの方が、情報収集をする際にブログやニュースサイトなどを閲覧されていると思います。 また、利用していく中で、気になる記事が無いか、アーカイブページや新着ページをスクロールしていくことがあるでし

SEOにおけるページネーションの必要性




Adobe XDでチーム内のデザイン共有をもっと簡単に!デザインスペック公開を使ってみた

イラスト制作が多いけど、webデザインの新しい技術も気になるデザイナーMika(@design_lb_mika)です。

Adobe XDで作成したデザインの仕様を共有出来る新機能が追加されました。

もうすぐAdobe XDで作成したデザインデータをエンジニア・コーダーへ渡すことができる日も近そうです。

Adobe XD で生成されたデザインスペックを使用する

https://helpx.adobe.com/jp/xd/help/design-specs-for-developers.html

(1)共有ボタンから「デザインスペックを公開」をクリックします。

image

(2)公開されたリンクを開くと作成した画面を全て開くことができます。
開いたページでデザインのカラーやフォントの種類、コンテンツやパーツの位置の距離が表示されます。
こういった位置情報とカラーがわかるとコーディング時に便利です。

image

(3)コピーしたい情報はデザインをクリックするだけでコピーできます。

image

使った感想としてはコーディングする側にしたらCSSの状態でデザイン情報をコピーできる方がありがたいかな?と思います。

今のままだとカラーは#000000というカラー名称しかコピーできないので‥。 フォントも種類名しか表示されないです。

IllustratorのCSSプロパティだとcolor:#000000;という感じでCSSも書き出してくれるから機能的にそっちの方が便利かなと思いました。

Photoshopの場合だとエクストラクトというPSDデータから画像書き出しやCSS情報をコピーできる機能があります。

今回のアップデートで期待してたAdobe XDのデザインスペック機能でしたがPhotoshopやIllustratorのようにCSS情報をコピーできるようにしてほしいなと思いました。

Adobe…




戌年(いぬ)の年賀状イラスト販売(Adobe Stock)

Illustratorでデザインもイラストも漫画も制作するデザイナーMika(@design_lb_mika)です。

Adobe StockとFotoliaで新しい素材をアップしました。
1番好きな犬種のウェルシュ・コーギーをモチーフに犬の年賀状イラストを作成しました。

この犬が1番可愛い部分は丸いハートのような形のお尻だろうなと思いました。 このイラストのような尻尾の短いペンブローグがコーギーの中では人気です。

昔、子供の頃に飼っていた犬がコーギーのミックス犬だったので愛着があって好きな犬種です。

自宅の年賀状用に作成したイラストです。 ひらがな文字はしあさってフォント、漢字はKFひま字を使用しています。

ほのぼのとしたイラストにはよく合うフォントなので気に入っています。

image

Adobe Stockに年賀状のイラストも暇があれば追加していきたいです。

今回、掛け軸のパターンもIllustratorで自作しました。

実はイラストよりも作りにくかったのは和柄のパターンです。

image

→Adobe Stock販売ページ

→Fotolia販売ページ


■Illustratorでグラフィック素材作る時に参考になった書籍

image
井上 のきあ エムディエヌコーポレーション 2010-04-09

戌年(いぬ)の年賀状イラスト販売(Adobe…





Illustratorでジッパー素材を作ってみた【Adobe Stock販売素材】

Illustrator(イラストレーター)でデザインもイラストも漫画も制作するデザイナーMika(@design_lb_mika)です。

Adobe StockとFotoliaで新しい素材を販売しました。

image

Adobe Stockのサイト https://stock.adobe.com/jp/stock-photo/gold-zipper/179936198?prev_url=detail


Fotoliaのサイト https://jp.fotolia.com/id/179936198

衣服のジッパー素材として使えるかと思います。 ジッパーから文字や写真をのぞかせたりしてバナー素材や見出しの素材として使えそうです。

Illustratorでジッパー素材を作ってみた【Adobe…




【Illustrator】Illustrator(イラストレーター)で英語を縦書きのテキストにする方法

漫画の吹き出しの文字は縦文字にすることが多いと思います。英数字を縦書きの設定にする方法を紹介します。


縦にしたい英語をマウスで選択して文字パネルの「文字回転」の部分を90度に設定するとちゃんと英語も縦文字になります。

【Illustrator】Illustrator(イラストレーター)で英語を縦書きのテキストにする方法

DTPの印刷業をしていた人にはお馴染みのIllustratorのテクニックなのでしょうが、私はWEBからデザインに入った人間なので知りませんでした。。

漫画もイラストもチラシもWebデザインも作れるIllustratorってある意味最強だと思います。 できない事は写真の加工くらいで‥。他はどんなデザイン・イラストにも対応できます。

【Illustrator】Illustrator(イラストレーター)で英語を縦書きのテキストにする方法 漫画の吹き出しの文字は縦文…




【Illustrator】衣服のファーの毛をIllustrator(イラストレーター)で作る方法

(1)散布ブラシオプションで毛の素材になるオブジェクトを作ります。 散布ブラシオプションをランダムで下記のように設定、彩色を淡彩に設定します。

【Illustrator】衣服のファーの毛をIllustrator(イラストレーター)で作る方法

(2)円ツール、線ツールで線に毛の散布ブラシを適用させます。

大きさを変えて重ねていきます。グラデーションをかけると立体的になります。

ふわふわ感のあるファー素材は人物の衣服の素材感を出すことができるので表現のバリエーションが増えるので覚えておくと何かと役に立つと思います。

【Illustrator】衣服のファーの毛をIllustrator(イラストレーター)で作る方法

【Illustrator】衣服のファーの毛をIllustrator(イラストレーター)で作る方法 (1)散布ブラシオプションで毛の…



昨今のSEOにとって良質な記事は必要不可欠です。ですが記事作成が出来なくて困っている方も多いようです。そこで記事作成のコツや記事作成を楽にする音声入力についてご紹介いたします。

書けないを解決!記事作成と音声入力のコツ




【らくがき漫画日記】Illustrator CC 2018になって気づいたこと

【らくがき漫画日記】Illustrator CC 2018になって気づいたこと

10月にリリースされたIllustrator CC 2018を最近インストールしました。

https://helpx.adobe.com/jp/illustrator/using/whats-new.html

レイヤーが層という表示になったことにも驚きましたが、それ以上に画像を保存した時に自動的に1x、2x、3xという名前のサブフォルダーが作成されるのには驚きました。

新機能のアートボードの整列されるのはIllustrator派のWebデザイナーには嬉しい機能でした。

バリアブルフォント、パペットワープツールの機能も使い方によっては面白そうです。

パペットワープツールはまるでAdobe Animate CCのボーンツールのようにイラストに関節をつなぐと動かせるんですよね。イラストのアニメーション制作に役立ちそうな機能です。

唐突にアイディアが浮かんだので日常ネタを4コマ漫画にしてみました。

【らくがき漫画日記】Illustrator CC 2018になって気づいたこと10月にリリースされたIllustrator CC…




自サイトのロゴデザインを作る過程を公開【Illustrator/Illustrator Draw】

ロゴ制作に使用したアプリと道具

  1. Illustrator Draw(iPadアプリ)
  2. Illustrator
  3. iPad
  4. スタイラスペン

スタイラスペンは下書き程度なら下記のような安いものでもOKだと思います。 普段のイラスト制作でも下書きは下記のスタイラスペンで描いています。

下書きはAdobe Illustrator Drawを使う

ロゴの下書きには下記のAdobe Illustrator Drawを使いました。 思いついたアイディアをiPadやスマホで描いた後すぐにパソコンのIllustratorで清書することもできるので便利です。

image

http://www.adobe.com/jp/products/draw.html

下記のように下書きが描けたら「アドビデスクトップアプリケーション」を選ぶとパソコンのIllustratorが開いてラフの下書きを開くことができます。 Illustrator使いの人にはオススメなアプリです。
思いつくままiPadでラフスケッチを何枚か描きます。 

image

ラフスケッチ完成後はパソコンのIllustratorで清書する

下書きはラフイメージで描いたのでパソコンの方のIllustratorで線が綺麗になるように四角形ツールを使って整えていきます。英語よりカタカナを採用しました。

image

四角形ツールで文字を作ったカタカナ文字を「変形→シアー→25度」にして斜めにしました。

文字に柔らかさが足りないと思ったのでアートボードを下にコピーして増やして「効果→スタライズ→角を丸くする」の効果をかけました。

image

最終的にはイラストやグラデーションを追加して下記のようなロゴになりました。

image

私のサイトは漫画風なサイトキャラクターがいるので、そちらの世界に合わせようと漫画やゲーム風なロゴにしています。アニメやゲームのタイトルをイメージしてるので立体的で存在感を濃くしてます。

サイトタイトルの「ラボ」の「ラボラトリー(LABORATORY)」は「実験室、研究室」という意味で名づけたので実験をイメージするフラスコのイラストを置いてみました。

事業用の屋号の由来はデザイン研究所という意味でつけました。

リニューアル前のポートフォリオデザインはこんな感じですが現在の漫画デザインの世界観を引き継ぎたいと思っています。

現在は自サイトのWordPressテーマを作成中です。

image

自サイトのロゴデザインを作る過程を公開【Illustrator/Illustrator Draw】 …



皆さんは、ユニバーサル検索というものをご存知でしょうか。 2007年頃から実装がされている検索表示方法なのですが、意識して見られたことは少ないと思います。 また、ユニバーサル検索という検索方法自体を知らない方も多くいらっ

ユニバーサル検索はサイトの上位表示に影響する?




デジハリのAdobeマスター講座がリニューアル!今だけAdobe CCコンプリートプランが29,800円で購入できる!10/31まで

デジハリで毎年Adobe CCのマスター講座を受講してAdobe CCコンプリート年間プランを34,000円程度で購入してます。通常価格の半額くらいです。


今だけ2017年10月31日まで税込29,800円とお安くAdobe CCコンプリートプランを契約できます。

▼申し込みのサイトはこちら

http://online.dhw.co.jp/lp/adobe_new/

私もあと3ヶ月待てばこのプランで契約できたのに‥残念です。

何が新しくなったのかというと、今まではお支払い完了確認後に郵送でソフトが届いていました。

新Adobeマスター講座ではお支払い完了後にシリアル番号がメールで送られてくるという内容に変わりました。Amazonでも購入後にすぐにシリアル番号が発行されるサービスありましたがそんな感じなのかなと。

image

今までソフトが届くまで郵送で3〜6日待たされることが多かったのですが、いつでも気軽に契約できるようになりましたね。

あと、新Adobeマスター講座では銀行振込とクレジットカード支払いだったのがコンビニ支払いにも対応したようです。

ゼロからAdobeソフトの勉強したい人にとっても動画授業がついてくるのでいいんじゃないでしょうか。

社会人でも学割でAdobeソフトの購入ができるのでオススメです。

デジハリAdobeマスター講座で2年は受講してるのに仕事が忙しい時期と動画授業期間が重なるので動画を最後まで観れてなかったりします。

Adobe CCのソフトはデザイン・イラストの仕事で使い倒してます。 Adobeの新製品のソフトを何種類使っても年間3万円程度ならお得だと思っています。

フリーランスや個人が安くAdobe CCと契約するには現状このサービスくらいかなと。 他に何かあれば教えて欲しいくらいですが。
商用利用可ですし、仕事で使う場合も問題ありません。


▼過去の関連記事

今年もAdobe CCの購入先はデジハリのAdobeマスター講座を選んでみた

Adobe CCをデジハリ・オンラインスクールで48%OFFで格安で購入してみた

デジハリのAdobeマスター講座がリニューアル!今だけAdobe…




Adobe XDをWebデザイン案件で使ってみた感想とAI・PSDヘ書き出す方法

Adobe XDをWeb/UIデザイン案件で使い始めました。

複数ページのデザインが作りやすくて気に入りました。

去年から使ってはみていたのですが今年に何度もアップデートされて使いやすくなりました。

共通デザイン(ヘッダー、フッター、レフトナビ、パンくずリスト、ボタン)はシンボル化しておくと変更修正が素早く行えるのが良かったです。

Adobe XDの共有URLを発行できる機能のおかげで、Photoshopで不採用だったTOPページデザイン制作もAdobe XDだとすんなりデザインが通りました。

Webデザインカンプというものはインブラウザコーディングと同じく、Webブラウザで直接デザイン見せた方が伝わりやすいと感じました。

デザイン制作後は共有リンクでチャット、メールで送信できるのでスピーディーに制作進行できています。

20ページ以上あるサイトのデザインカンプをPSDで1枚1枚書き出してクライアントに確認を取るという作業は途中で時間かかりそうだしスタミナ切れしそう‥という気がしたので途中でツールをAdobe XDに切り替えました。

現在進行中の案件ですが、今の所はやり取りでは問題なさそうです。

使ってみた感想としてはAdobe XDが新機能追加されて便利になるとPhotoshop使う人が減るかも‥ということでした。

それだけデザインに関しては不便だと感じる所が少ないです。 動作が速くてサクサクと下層ページが10ページ以上作れたりできますし。

重たくてレイアウトしにくいPhotoshopを今後UIデザイナー/Webデザイナーが選ぶとは思えません。

今後Adobe XDに希望する機能はデザインからCSSをコピーできる機能です。現状の機能だとコーダーに渡す際はPSDかAIで書き出してデータ渡すしかありません。

Adobe XDの書き出し機能にAI,PSD形式が追加されたら便利だろうなと思います。

私は元からIllustrator派のデザイナーなのでPSD納品の場合は最後の納品時にPSDデータへ書き出せれば問題ないと思いました。デザイン自体は慣れたソフトでやる方が効率いいです。

IllustratorとAdobe XDはSVGデータの共有がしやすいと感じました。Illustratorで作成したSVGアイコンをAdobe XDに直接貼り付けることもできます。

これからのWebデザイナーは色々なツールを適材適所で使える人が求められている気はします。


Adobe XDのデザインデータをPSDに変換する方法も調べてみた

Illustrator使いであればお馴染みのPSD書き出しでPSDデータに変換できます。

  1. Adobe XDのデザインデータをPDFで書き出す
  2. 書き出されたPDFをIllustratorで開く
  3. グループになってる画像の上を右クリック→グループの解除
  4. Illustratorの上部メニューからファイル→書き出し→書き出し形式にPhotoshop形式を選んで保存


IllustratorのPSD保存の方法では結合するレイヤーも多かったり、Adobe XDのデータだとテキストが途切れて散り散りになってしまうので後で手直しが必要でした。

レイヤーが複雑ではないアプリのデザインだと書き出しは成功しやすいのかなと思いました。


▼下記サイトが参考になりました。

Adobe XD で作成したカンプデータをPSDにする方法

http://arribux.co.jp/devlog/web_design/193/

WEBデザインをFw→Ps→Ai→Xdへ Xdからのデザイン書き出し方法

https://blog.mudora.jp/?p=4276

Adobe XDをWebデザイン案件で使ってみた感想とAI・PSDヘ書き出す方法 Adobe…