ここからのレッスンと実習について
実習について
各レッスンの末尾には実習があります。
解説と一緒に作業していただくことで、美容室サイトを構成する４ページ分のワイヤーフレームとデザインを完成させることが出来ます。
なお、実習の提出は必要ありません。
実習サイトのデザイン要点
【サイトの目的】
- 予約獲得
- お問い合わせの獲得
【ターゲット】
- 20代～40代前半の女性
- 自然派に興味/こだわりがある
ペルソナは前レッスンでも登場した、こちらの女性とします。
【クライアントからの要望】
- 自然派サロンなので、柔らかい雰囲気
- シンプルめで分かりやすいサイトが良い
素材について
使用するテキスト・画像は、素材タブ【レッスンの素材一覧】よりsozai.zipをダウンロードしてご利用ください。
実習の進め方
実習の解説通りではなくとも構いません。
特に配色のレッスン以降、デザイン要素部分は解説を参考にオリジナルの配色・デザインを試していただいても構いません。
何パターンか作成してみると、かなり力が付きます。
イラストレーターでの作成について
イラストレーターでワイヤーフレームやデザインを組んでいく方法は人それぞれです。
1ファイル＝1ページ分にする方も、一枚のアートボードに全ページのレイアウトを入れる方もいます。
今回は同じワークスペースにアートボードを複数設置して、各ページのスマホ・PCデザインの制作を行っています。アードボードの作り方は下記で紹介します。
なお、イラストレーターの基本操作につきましてはWEBデザインのためのILLUSTRATOR入門講座 をご確認ください。
アートボードの設定方法
まず、イラストレーターのファイルから「新規」をクリックします。
ドキュメントのサイズを決めるウィンドウが表示されるので、幅を1280pxに設定してください。高さは何でも構いません。
カラーモードはRGBにしてください。
作成ボタンをクリックすると、アートボードが一つ配置された画面になります。
アートボードツールをクリックしてください。
自動的にアートボードが選択された状態になります。
ならない方はアートボードをクリックして、選択状態にしてください。
Altキー（Windows）またはOptionキー（macOS）を押しながらドラッグするとアートボードが複製できます。
複製したアートボードをダブルクリックしてください。
アートボードオプションのウィンドウが立ち上がります。
幅を375pxに変更し、OKをクリックしてください。
細くなりましたね。
こちらのアートボードをスマートフォン表示用に使用します。
ドラッグして、使いやすそうな位置へ変更してください。
Shiftキーを押しながらクリックすると、複数のアートボードを選択できます。
4セットになるまで複製してください。
これでアートボード作りは完了です。
アートボードのサイズを変える
アートボードの高さ（長さ）が足りなかったり、余ったりしたときはアートボードツールを使って調整することができます。
アートボードツールをクリックし、変更したいアートボートをクリック。
枠線部分付近にマウスを持ってくると拡大・縮小を示す矢印が表示されます。
ドラッグしてサイズを変更してください。
アートボードをタブルクリックして「アートボードオプション」のウィンドウを表示させ、数値として打ち込むことでも変更できます。
●ガイドの作り方
Webサイトは左右端ギリギリまでテキスト等が入ってしまうと見にくいですよね。
適度な余白を保つためにガイドを作っておくと、配置が少し楽になります。
ガイドの作り方をご紹介します。
長方形ツールで設定したい枠を作ります。
今回、PCサイトの基準幅を1140pxにします。
整列ツールを使って、アートボードの中央に配置します。
↓
長方形を選択した状態で右クリック。
表示された右クリックメニューから「ガイトを作成」をクリックします。
これでガイドができました。
図形のまま置いておくのとの違いは、重ね順に関係なく表示される点です。
直線ツールでも同様にガイドを作成することができます。
揃え位置の目安がほしいときなどに使ってみてください。
※素材にアップロードしているテンプレートでは、スマホ用アートボードにも左右15pxずつ余裕をもたせて345pxにガイドを入れています。