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

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

ワイヤーフレーム

ワイヤーフレーム

ワイヤーフレーム作成ツール
  • この手のツールは、初心者が使った場合非効率になる場合があるので注意が必要です(ツールを使うための時間がかかりすぎる)

Illustratorで作業(ワイヤーフレーム

ワイヤーフレームの練習


  Web Designer's Road

  • 「幅・高さ」「マージン・パディング」までを設計する
  • 書き出しは「アンチエイリアス」をOFFにする

実践

  • 最初の段階では、既存のページをもとにブロックをつくる練習をします
  • 慣れてきたら、自分のアイデアにそってワイヤーフレームを作ります
キャプチャーを撮る(例)
  • Chromeの場合、拡張機能「Screen Capture」で「Capture Whole Page」を選択します


  1. キャプチャーをIllustratorにテンプレートで配置
  2. アートボードの左上を「原点」にする(数値指定をしない場合は省略します)


  1. 長方形ツールでドラッグして、各ブロックを線で描いていく
  2. 各ブロックをレイヤーに配分する
  3. 書き出し(RGB、レイヤーを保持、アンチエイリアスOFF、Photoshop形式)
  4. Photoshopで開く


レイヤー名も含めて書き出されます。


  1. レイヤーのサムネールを「Ctrl+クリック」でオブジェクトを選択範囲にする
  2. マーキーまでガイドをもっていくと、スナップされる
  3. それぞれのガイドを引く



カンプ作成の手順

  1. コンセプト・ターゲット・サイト構成を決める
  2. デザインの方向性を決める
  3. 手書きでレイアウトを書き出す
  4. ファイルを用意する
  5. デザインする
  6. レイヤーパネルの整理をする

カンプ(comprehensive layout)の目的

  • クライアント側で基本的なメニューやレイアウト等を見た目で確認できる
  • ユーザーの使い勝手(ユーザビリティ)やわかり易さを決定することができる


カンプは、ユーザーの使い勝手や 導線などを重視して作成されるべきです。
ただキレイなだけのデザインではなく、目的を達成するためのデザインを制作することが前提となります。
このとき「CSSコーディング」を理解していることにより、より目的を達成しやすいデザイン案にすることができます。

カンプ案3点

仕事の中では「カンプ案3点(もしくは、ラフ3点)」という指定をされることが一般的です。
では、アイデアを「3点」考えればそれでいいのかというと、それだけでは意図を満たしたことにはなりません。


重要なことは、視点を変えることです。
例えば、以下のように視点を変えてみます。

  • クライアントの視点
  • 自分の視点(オリジナリティ)
  • いまの流行(トレンド)


これを満たすデザインをつくると、必然的に「3点」できることになります。

Photoshopでのカンプ作成

  1. Illustrator(グレーボック)のレイヤー保持で、Photoshop形式へ書き出し
  2. オブジェクトの端にスナップさせて「ガイド作成」
  3. レイヤー管理をしながらブロックごと作成



オブジェクトにスナップされていると、ガイドが引きやすくなります。


Photoshopでゼロからカンプ作成する場合
  • ガイドを数値で指定します。




《実践》

  • ガイド作成
  • Illustratorファイルを配置
  • シェイプツールの使い方
  • グラデーションオーバレイ
  • 文字の入力
  • アンチエイリアスのONとOFFの違い


《定規の表示》
(1)[ビュー]→[定規]
 ※[Ctrl(Command)]+[R]


《ガイドのカラーの変更》
(1)[編集]→[環境設定]→[ガイド・グリッド・スライス...] 
(2)[ガイド]→[カラー]→[サーモンピンク]
 ※画像に「グリーン」を多様する場合[サーモンピンク]にします。
 ※[スタイル]→[破線]は、好みの応じて設定する。


《ガイドの作成》
(1)ズームツールでアドレスバーの左下あたりを拡大します。
(2)定規の基点にしたい部分に水平方向・垂直方向のガイドを作成します。
(3)その交点にあわせて定規の基点を移動します。
(4)水平方向・垂直方向にガイドを作成します。
 ※水平方向(Y軸):10、35、80、90、250、260、280
 ※垂直方向(X軸):10、35、120、130、180、420、430、600、610


《ガイドの操作》
(1)完成したガイドを固定します。
  ※[ビュー]→[ガイドをロック]
(2)ガイドの表示/非表示を切り替える
  ※[Ctrl(Command)]+[:コロン]



《グループ管理》
レイヤーをグループ管理する。




《ヘッダー部》


  • シェイプに枠線を表示する

(レイヤースタイル:境界線)


  • 電話マーク

書体「Wingdings」→「Shift+8」




《メイングラフィック》
シェイプの上に写真を配置して「クリッピングマスクを作成」

  • レイヤーの間を「Alt+クリック」





《メインコンテンツ》


  • グラデーションオーバレイ

レイヤー効果「fx」→「グラデーションオーバレイ」





  • 文字にドロップシャドーをつける



Web画像

インターネット上で使える画像の種類は

  • JPEG (Joint Photograph Experts Group)
  • GIF (Graphics Interchange Format)
  • PNG (Portable Network Graphics)
です。


Web画像は最終的には、四角いビットマップデータ(GIF・JPEGPNG形式)として書き出します。


広告を非表示にする