読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

illustratorでWebサイトのカンプを作る

Illustrator

今回はillustratorでカンプを作ります。

f:id:yachin29:20160607201954j:plain



作例
http://yachin29.webcrow.jp/Cotorier/



まずはおおまかなレイアウトを決め、ワイヤーフレームを完成させます。ワイヤーフレームとは、Webページのおおまかなコンテンツ要素やレイアウトを示すものです。
作成する際はWebサイトとしての体裁や、情報の優先順位などを考えて、配置場所を考えながらレイアウトしていきます。
今回は、以下のコンテンツ要素を配置します。
この段階では細かいカラー設計はせず、グレースケールでカンプを制作していきましょう。


ヘッダー(サイトの名前やロゴ、目印になるものなど)
  • サイトの名前・ロゴ
  • タグライン
  • グローバルナビゲーション
メインのコンテンツ(見る人に伝えたいサイトの中身)
  • アイキャッチ画像
  • カフェの特徴の簡単な紹介と詳細へのリンク
  • メニューの一例(写真つきで数点)と詳細へのリンク
  • お知らせ(営業時間のお知らせなど)の新着リスト数点
  • 補助的なコンテンツ(補助的な情報や関連サイトの紹介など)
  • 営業時間・住所と詳細なアクセス方法へのリンク
  • ソーシャルアカウントへのリンク など
  • フッター(サイトの連絡先、著作権情報など)
  • コピーライト

使うテキスト

Cotorier Cafe

毎日の おいしいごはんと おまけをすこし

お店のこと
メニュー
アクセス

毎日食べたい、おうちみたいなごはんやおやつ

Cotorier Cafe(コトリエ カフェ)は、あなたのもうひとつの「おうち」に
なりたいごはんやさんです。毎日食べたくなるような、どこかホッとする
ごはんにおやつ、飲みものを揃えて、ゆっくりくつろげる空間でお迎えし
ます。気軽なおひるごはんに、お茶の時間に、会社帰りの晩ごはんに、
「ただいま」を心よりお待ちしています。

お店について

おすすめメニュー

すべてのメニュー

日替わりごはんセット
春野菜とあさりのチャウダー豆としらすのごはん、新ごぼうのきんぴら

週替わりカレー
甘辛たけのこカレー ゆでたまごつき

季節のおやつ
西か東か!さくらもち食べ比べ対決セット

ひとくち晩酌
今だけ!いちごごろごろサングリア


お店からのお知らせ
■ 2015-04-22 ゴールデンウィークの営業について

■ 2015-04-21 今週の日替わりメニュー(4/21 - 4/26)

■ 2015-04-14 今週の日替わりメニュー(414 - 4/19)

■ 2015-04-10 春限定のおやつがスタートしました!


こちらもどうぞ
Facebook
Twitter
Pinterest
Blog


店舗情報
地図・アクセス方法
住所 東京都杉並区高円寺南7丁目7-4 ことりやビル2F(東京メトロ丸ノ内線新高円寺駅から徒歩7分)
電話 03-0000-0000

営業時間 11:00 - 23:30(L.O. 23:00)
ランチタイム 11:00 - 15:00(L.O. 14:30)
定休日 日曜日・祝日

Copyright© Cotorier Cafe. All rights Reserved.

まずは環境設定をweb用にしましょう

  • [一般]メニューにある[キー入力]を「1px」に変更
  • [単位]メニューを選択し、設定できる4項目すべてを「ピクセル」に変更
  • [ガイド・グリッド]メニューを選択し、[グリッド]を「10px」、[分割数]を「2」に変更
新しいドキュメントを作る
  • [プロファイル]で「Web」を選択する
  • [サイズ]のオプションで[幅]を「1280px」、[高さ]を「1500px」にする
  • [新規オブジェクトをピクセルグリッドに整合]のチェックを外す

各要素を配置する

  • まずはcontainer要素を[幅]960px、[高さ]1500pxで作成する。
  • header部分は高さ100px
  • main部分の高さは400px
  • menu部分の高さは460px
  • info部分の高さは260px
  • access部分の高さは200px
  • footer部分の高さは80px

幅はすべて960px



次にテキストや画像を配置して行きますが、無造作に配置するのではなく、ガイドを使いグリッド状に配置して行きましょう。

960.gs


テキストを配置する

いったん[フォントサイズ]を「16px」、[行送り]を「24px」としておきます。これらの値は、ブラウザーで閲覧する際のテキストの標準的なサイズと、日本語フォントで可読性が保てる行間の標準的な数値です。後ほど見出しや本文などの用途によってそれぞれ調整します。

画像を配置する

メイン画像は自身で用意する。大きさは適宜。

f:id:yachin29:20160607003426j:plain


liginc.co.jp





http://yachin29.webcrow.jp/ai_sample.zip