DTPデザイナー、知識ゼロでWebデザイナーを目指す

Webの知識ゼロのDTPデザイナーがWebデザイナーを目指すブログです。

1日目:webデザイン本を読む

今日やった事

「いちばんよくわかる Webデザインの基本 」を読む

いちばんよくわかるWebデザインの基本きちんと入門 レイアウト/配色/写真/タイポグラフィ/最新テクニック (Design&IDEA)

http://いちばんよくわかるWebデザインの基本きちんと入門 レイアウト/配色/写真/タイポグラフィ/最新テクニック (Design&IDEA) https://www.amazon.co.jp/dp/4797389656/ref=cm_sw_r_cp_tai_Zrp0zb74JSYC8


Chapter 1:Webデザインの基本(所要時間:80分)
Chapter2:レイアウト(所要時間:130分)

(感想)
読み飛ばさずにじっくり読んだらまあ疲れた。
完全にデザイン未経験ならこれむずいのでは?
レイアウトなどはDTPかぶる部分もあり、所々ああ分かる
という感じ。


以下内容メモ、気になったところなど。

>は内容についての感想など。
__________________________
Chapter2:レイアウト

内容:「そもそもwebの目的ってなんなんでしょう」
ターゲットから、 KPI、Webデザインのワークフローまで。


Webサイトの新規構築やリニューアルは
「目的」「目標」を明確にすることが大事
>>DTPデザインする上で案外曖昧になっていないか。

目的=webサイトで実現したいことは何か

特設サイト(キャンペーンとか採用ページとか)
は立ち上げる理由がそのまま目的になる
>>紙も大方同じである。

目標=webサイトで達成したい数字は何か?具体的に示せるものである必要がある。
>>紙は達成したい数字についてはすごく曖昧だよね。

KPIとかKGIとか、
>>わかるようでわからん。横文字が多くて覚えられない。
必要性はわかる。定めることで、機能やページレイアウトが決まってくるんでしょうね。

>>KGIとかをちゃんとヒアリングしてwebサイトを作れる制作会社は
はたしてどれほどあるのだろいうか。

しらなかった
>>CV率の意味

webのターゲットを広げすぎるはよくない。が、
全世代ターゲットにするならamazongoogleのように装飾的なデザインを減らし、
コンテンツの伝わりやすさを重視する必要がある。
>ほう

バイスも考慮する
IEの検証確認は減らしてandoroid各バージョンで確認するとか。

ペルソナの設定方法
アクセス解析ツールから描いていくんですね。なるほそ。

「コンセプト」の難しさ
>一言で「サービスの特徴」「ターゲット」「きょうごうぶんせき」「戦略」「目的」
が語れること?デザインするうえでぶれない指針とするためには確かに必要やね

ワイヤーフレームはスピードが命
>代表的な数ページを作る。
代表的なページ以外に「ユーザーシナリオに基づくページなど。」

・グレースケール
・てきすとはほぼダミー
・画像はざっくりのえりあしていで
・コピーとかきまってれば入れてもよい
・視覚表現は最低限に

ワイヤーフレームはユーザーが目的を達成できるかという「タスク重視」の観点
プロトタイプは数ページの体験を通して肯定的な印象を抱いてもらえるかという「プロセス重視」の観点で用意する。
>ほお
通常のwebページはワイヤーフレームしか作らないこと多し。
Web1アプリとかだと操作とかインタラクションが多いからプロトタイプは必要。
>adobeXDつかいたすなぁ

70%の完成度をめざして一度作り切ってから細部にこだわる。
納期を破らない。

>これは紙も同じだが、90%目指してしまい作業が押すのはやりがち・・気をつけたい
Webの場合はほんとこれだろうな

時間ごとにスケジュール区切る
>苦手・・やっていきましょう。

Webサイト作りにひつような作業をしっかり把握する
ワークフローの全体図

企画>設計>制作>運用
>p14だが詳細図は割愛。しかしワークフロー図はありがたし。
ワシがかかわるのはどれや!全部やんの??

__________________________

Chapter2 レイアウト

内容:レイアウト基礎
レイアウトの基本的な考え方、各場所の名前の、グリッドレイアウト、ナビゲーション、レスポンシブデザインとは、レイアウト例など。


WEBデザインにおいてのレイアウトで、見やすく美しいとはすなわち、
「ユーザーが欲しい情報を的確に伝える」ことに繋がります
>ほんまそれ。区とか市のHPなどは情報が探しづらくて毎回
ブチ切れそうになるのはレイアウトやそもそものページ構成がおかしいからなんだろうな。

動線まで意味付けされたレイアウトを心がけよ!
>はーい

ランディングページ LP
>お問い合わせなどの目的達成をコンセプトにした1ページ構成のサイトの事。
コーポレートサイトのようなナビゲーションはなく、1ページで情報が完結している事が特徴。

>例に出てたタニタのLPはいいね。
ページ最後のボタンが「ラインナップはこちら」になっているのは
ギラギラした商魂を感じなくていい。
一昔前のLPは最後のボタンが「購入する」
になっている事が多くて、消費者目線だと「またコレか・・」ってウンザリしていたけど
これならまあみてもいいかという感じ。消費者も馬鹿じゃないから
買わせようとする意図がみえみえだとにげちゃうよね。


●レイアウトの四大原則

①近接
②整列
③反復
④対比


①近接
関連する情報を近くにまとめてグループ化する事

②整列
要素を統一化して、意図的に配置する事で見やすくなる

③反復
デザインのなんらかの特徴を繰り返す事。
そうする事でサイト全体の統一感が生まれたり、ユーザーがサイトに見慣れやすくなる。

④対比
情報の一部をあえて揃えないでコントラストをつける事で要素に意味を持たせてて「組織化」する事。
>こう書くとわけわからんけどコントラスト付けて目立たせることでしょうな。

このレイアウトの原則は紙と同じである。
ただこの原則を守る事で生じる結果(サイトの離脱率低下とか)が紙とは全然質が異なりますね。つーかこれウェブの方が全然やりがいありそうやんけ〜。


●WEBのレイアウト基本

・グリッドレイアウト
・フリーレイアウト


・グリッドレイアウト
グリッドにそってレイアウトする事でpc、スマホ各デバイスごとに変わる
レイアウトが作りやすい。
BOOTSTRAP もこれや!

・フリーレイアウト
コンテンツの横幅を固定するのでブラウザが変更しても見えかたは同じ
情報多いサイトでよく使われる

カラム=段組み

グリッド使ってレイアウトするのは、レスポンシブデザインする上で重要。
グリッドのテンプレが落ちている「960 GRID SYSTEM」という超便利なサイトがあるそうです。いろんな形式でダウンロードできる。
>最高かよ!


(!)グリッドレイアウトの注意点
全てのページをグリッドレイアウトで構成するとサイトが単調になり、
ユーザーに飽きられる可能性がある、あくまで手段の一つと心得るべし

フリーレイアウト
バイス関係なく意図したデザイン見せれるし自由なレイアウトできる。
「モバイルファースト」によって、フリーレイアウトは最近は廃れ気味。
※モバイルのユーザーがPCを上回る
>でししょうね。難度高そうだし。

WEBサイトにどのレイアウトが適しているかはコンテンツ内容、対象のユーザーによって
異なってきます。
>なるほど〜

夫からもう少し読み流してスピードあげてはとの指摘あり


●WEBデザインにおけるナビゲーションのレイアウト

・グローバルナビゲーション(階層型ナビゲーション):大きなカテゴリわけ
・ローカルナビゲーション:大カテゴリの中のさらに細かいカテゴリ
・ブレッドクラムナビゲーション:ZOZO>一覧みたいなやつ
・関連ナビゲーション:この商品を買った人はこんなものも買っていますってやつ
・コンテキストナビゲーション:リンクの青文字や
・ページネーション

ナビゲーションのレイアウトパターン

・上部ナビゲーション型
・左袖ナビゲーション型
・逆L字ナビゲーション型

他 オフキャンバスナビゲーション

レイアウトの視線誘導のパターン
・z型
・F型・・レイアウトに迷ったらひとまずF型にすべし。
こうする事で、どのに重要なコンテンツをおけばいいかが明確になります
>ありがたい。迷ったらFや!

●タッチデバイス向けのレイアウト

スマホはマウス見たく細かい操作が出来ないので、クリックできるボタンサイズも決められれている。
iOSAndroidヒューマンインターフェイスガイドラインを確認すべし!

「リキッドレイアウト」
バイスごとに画面サイズが変わっても可変して表示できるレイアウト方法。
幅をピクセルではなくて、%で指定するのがポイント!すごいねぇ〜

スマホ向けにデザインするときはコンテンツの幅が伸びたり縮んだりしずらいようにすべし

レスポンシブデザインのメリット デメリット

一つのHTMLで複数デバイス向けのサイトが出来る
管理簡単、ヒューマンエラー起きにくい
URLも変わらないし、SEO的にも良い

×
重い!工数かかる!
バグとかの確認も大変

レスポンシブデザイン向けのレイアウト
・シングルカラムレイアウト
・マルチカラムレイアウト
・フルスクリーンレイアウト
・コンテンツ敷き詰めレイアウト
・余白生かしレイアウト
・情報の多いレイアウト
・ECで多用されるレイアウト
・グリッド意識のレイアウト

ネットでデザインのトレンドを常に追うべし!
Bookma! V3
Muuuuu.org
ARTNOC
Responsive WEB design EP

つかれたf・・