Illustratorを使ったWebデザインのテクニック

IllustratorからHTMLを作成するまでのワークフローを知る

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ここでは、Illustratorでデザインを作り、実際にHTMLにするまでのワークフローについて、お話ししていきます。実際にWeb上にデザインが反映されるまでの仕組みを知ることで、より合理的なデザイン制作を心がけることができます。
講師:
05:59

字幕

ここでは Illustrator でデザインを作り 実際に HTML にするまでのワークフローについて お話ししていきましょう もしあなたが Web デザインの初心者か Adobe Illustrator を Web デザインのツールとして 使うことが初めてという方であれば 実際に Web 上にそのデザインが反映されるまでに どのようなプロセスを通過するか そういうことを知るのはとても重要です なぜなら そういった知識は あなたのワークフローを合理化して あなたが上達させるべきポイントが 明確になるからです または この知識を得ることにより よりワークフローを重視した方法で 作業を進めることができるようになります 念のためお伝えしておくと これは講師の個人的なワークフローで 世の中には他にもたくさんのワークフローがあります どの方法が正解とか どの方法が間違いということではなく それぞれの人に最適な方法があるのです 私の場合は 今からご紹介する方法が うまく機能しています まずはアイディア作成についてお話しをします すべてのウェブプロジェクトは アイディア作成から始まります 紙の切れ端にスケッチしても良いですし iPad のアプリでドローイングしても良いでしょう これらのアイディアは Web サイトを作るための材料になります あなたの頭の中から アイディアを取り出して 実行可能な形を与えていくのが キーポイントとなります そして このスケッチを Illustrator のような アプリで作業するときの 出発点としましょう スケッチをすることで あなたの頭の中のアイディアを外に出して 形にし始めることができますし 他の人にそれを共有して もっと良い形に ブラッシュアップしていくこともできます アイディアをスケッチしたら 今度はワイヤーフレームを作ります ワイヤーフレームは モックアップと呼ばれる 実物に近いデザインを作るための骨組みです そして モックアップは 最終的には 本物の Web サイトとして組み上げる 素材になります ワイヤーフレームは 仮の写真や 文章やボタン等が入る場所を指定する 青写真となります このプロセスはとても重要です ここで作業したことが この後に作成するものの土台となるからです 土台がしっかりしていないと その上に建つ家はぐらぐらして 危ないものになります ワイヤーフレームを作るときの考え方も同じです モックアップを作る段階では 本物のロゴや配色 フォントなどを使っていく必要があります クライアントさんや自分自身の 想いがこもった素材を準備しましょう モックアップは最終のウェブサイトに できる限り近しい形で作成する必要があります アニメーションやムービーは この段階ではまだ準備できていないかもしれませんが それ以外の部分をできるだけ忠実に作成します このモックアップは これ以降のウェブ開発のロードマップとなります 自分がこれ以降の開発を手がけるにしても 他のフロントエンド・エンジニアさんと 共同作業するにしても モックアップは開発者にとって クリアで分かりやすいデータにしておくことが重要です そうすることによって 共同作業がよりスムーズに進行するでしょう このコースでは デザイナーの皆さんが 開発者の方と 意思疎通するためのティップスも できるだけ織り込んでいきたいと思います モックアップができあがったら 次は画像を切り出していきます 画像を切り出すとき やたらと細かく切り刻んで 後で HTML と CSS を使って Web ページ内に配置する というわけではありません 最近の Web デザイン手法では 材質は 後でコーディングするための領域を指定する という意味合いが強いことを 覚えておいてください これについてはもっと後のムービーで ご説明していきます モックアップから素材を切り出したら ここからはコーディングとバックエンドの 開発段階となります もしあなたがコードは一切書かないタイプの デザイナーだとしても フロントエンド・エンジニアや バックエンド・エンジニアは 大切な仕事のパートナーだ ということを覚えておいてください 決して敵ではありません 開発者の人たちが あなたのデザインに息を吹き込んで リアルに動くウェブサイトに 仕上げてくれるのです あなたがコードも書けるデザイナーであれば それは素晴らしいことです どちらもできる人材はとても貴重です デザイナーにとって最後の大切な段階は 納品です 実際に利用するサーバに データをすべてアップロードし 納品完了となります もちろん Web サイトは 作ったら作りっぱなしではなく このあとも運用して 育てていく必要がありますが 実際にサイトを公開した段階で ワークフローは一旦ひと区切りがつきます さてここまで アイディア作成から 納品までのワークフローを 一通り見てきました もちろん Illustrator は Web 制作をするための重要なツールですが そのツールを使いこなす前の アイディア作成やワイヤーフレーム作成なども なくてはならないプロセスだ と知っていただけたでしょうか このワークフローは完全に正解だ というわけではありませんが よくあるパターンのひとつですので ぜひ参考にしてみてください

Illustratorを使ったWebデザインのテクニック

このコースではIllustratorを使ったWebデザインの方法を学びます。IllustratorをWebデザイン用の設定に変更するところから始め、各種端末向けのドキュメントやユーザーインターフェイスの作成ができるようになるまで順を追って説明します。このコースを見れば、整理されてエレガントなIllustratorドキュメントが制作できるようになるでしょう。

7時間03分 (52 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年04月09日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。