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

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

今日やったこと　10/17

今日やること　10/17

HTML,CSSの基礎

  • 読んだ本 HTML5&CSS3 chapter2-5 結果チャプター3の途中まで・・

chapter2 HTMLの書式

書式の基本

  • HTMLの基本的な書式は開始タグと終了タグでコンテンツを囲むというもの。
  • 例）<a href="http://sbcr.jp"></a>　
    • <開始タグ>``コンテンツ``</終了タグ>という構造が基本
    • コンテンツはブラウザに表示される部分と考える
    • <開始タグ>の後ろに続く部分が属性という
    • 属性には特定のタグにしかつけれない属性と、グローバル属性がある。 　グローバル属性はclass属性とかid属性とか
    • 終了タグのない書式を空要素という

　要素と要素の階層構造

HTMLにCSSを読み込む

  • <link rel="stylesheet" href="読み込みたいCSSファイル名">

今日の気づき

  • classはいつでも追加していい。
  • サイト設計する前に、手書きで構造をちゃんと書くと、classだのidだの迷いにくくなるのでは。

5日目:markdown記法

今日やったこと

見出し

  • 大見出しは「#」＋半角スペース
  • シャープを増やすと見出しのさいずが小さくなる

イタリック

  • イタリックは「*」でもじを挟む

強調

  • 強調は「**」で文字を挟む

箇条書き

  • 箇条書きは「*」+半角スペース
    • 「tab」を入れると箇条書きのインデントがずれる

数字の箇条書き

  1. 数字の箇条書きは「1.」+半角スペース
  2. 数字を入れればビューアーがナンバリングしてくれる。
  3. 後から数字をたしても大丈夫

引用

引用は「＞」+半角スペース

一行開けると改行できる

リンクを貼る

リンク * 書き方は[ラベル](URL)

水平線

  • 「*****」とか「---」でかく

参考

4日目：webデザインの本を読む

Chapter5 タイポグラフィ（60分）

書体とは

・一番いいことは読み手に「書体」を意識されないこと

書体に意識が行かずに内容・印象が上手に伝わることが良いデザイン。
＞「印象」が正確に伝わるの、大事。
書体がしっくり来ない時は印象が違うってことなんだね。

ウェブページのほとんどは「文字」

Web 書体選びのポイント！
・ナビゲーション：視認性
・見出し：協調性
・本文：可読性

日本語の斜体は、ウェブページではブラウザ上で斜体で表示する。
＞引用とかに使う

Webサイトの一行あたりに適した文字数
35〜40文字
＞とはいえ今は本文幅は可変のものがほとんどだよね

ブログなどの書体サイズ
＞
ブラウザだと 16〜18px程度
スマホで 14〜18px
一番小さくて12px

行間
＞紙よりちょいひろめか。
Line-Heightというらしいが、はて？dtpでつかったことないや

一文字づつのカーニング
＞CSSのletter-spacingでできる！
両はし揃えとかも、CSSでやる
Open type fontの一部では文字間隔の設定も可能。

・糸井重里のほぼ日は文字組みこだわってるらしいよ・・・

文字のアンチエイリアス
＞ Macのみ対応。winのもじがガビガビなのはモニターのさだけじゃなかったのね。


もじコード
・今は「UTF-8」選んどけば問題ないよ！！
今のウェブのスタンダードはこれ。
国際基準でもあるしHTML5でもUTF-8を推奨している。

HTMLファイル保存時
＞HTMLファイル上でもじコードを指定＆保存形式も同じにエンコードしないと
文字化けするよ

ブラウザ
＞ブラウザもまたエンコード指定がある。
文字化けはブラウザのエンコード指定が異なるときに起きる。

オープンタイプフォントの機能「プロポーショナルメトリクス」
＞カーニング、旧字体、分数、合字など。
DTPデザイナーには地味に嬉しい機能

適切なfont family の選び方
＞ブラウザごとの差異を理解する


・標準フォントが全部ゴシックだと思ったら大間違い。
古いSafariなんかは明朝だったりするよ。
＞Font family はCSSで先に書いた順から適用される。
CSSで「游ゴシック体＞でなければサンセリフで」という風に指定すれば
ブラウザごとに印象が超変わるのは避けれる。なるほど

＞CSSではフォント名は日本語、英語どちらでも指定する。
ブラウザごとに読み取れるのが英語だけだったり、日本語もいけたりバラバラの為


ヒラギノは色々あるから指定を間違えないように
だるいね。ProNとかね。

「游ゴシック」のMacとwinでは太さが違う
＞太さもCSSで表示しないと印象が変わってしまう

WEBフォント
＞サーバ上からフォントを呼び出して表示することでパソコンにないフォントも
表示できる！すごい！けど、
サイトが重くなるし、継続的に費用が発生しちゃうし、全然良いことない。
＞これはさすがにクソすぎワロタ・・・

とはいえ、wordpress上だとadobe type kitが一部使えるとか、だんだん広がってきてはいる。。
＞「サブセット化」して、文字の重い問題を解決できるらしい
※使っている書体だけ読み込む的な。

Webフォントを配布しているサービス、イッパイある。
Google fontsはただだからオススメ
日本語だと源ノ角ゴシック。

3日目：webデザインの本を読む

Chapter4 写真と図版（60分）

 

・人は文字は読まなくても写真は見てしまう。
＞わずか10秒で離脱するんやで。
＞だからこそ写真には気を使うべし
＞SNSもキャッチの画像の有無でクリック率がめちゃくちゃかわる

アイコンやイラストも重要。
ユーザーはじっくり読み込まない！
イラストなどはトーンを揃えることは最重要！世界観を統一する

PNGは劣化少ないが容量が重たくなりがち
・外部の圧縮ツールを使う
・ローディングを実装する

写真のトリミング
・基本：不要なものをカットする
・画像一覧などは、トリミングを揃えることが大事。
統一しないと印象が悪くなる。
＞統一しすぎても単調になるので、少し強めのトリミングを入れたりすると、めせんを誘導できる

トリミング方法
・CCSでトリミングするとらくやで
細かい指定の際は「clip プロパティ」

解像度、pixel1について

・画面解像度
・ppl (pixel per inch)


Retina対応
＞高解像度ディスプレイの登場でデバイスの1pixelが1pixel以上を描画できるようになった。
iphone4から Retinaディスプレイが導入され 解像度が326ppiに。
これにより画像を綺麗に表示するのに倍のサイズの画像が必要になってきた。

実装時に画像重くなるのでJavaScript やmedia Queriesなどをつかって対策をする必要があるそう。
＞今後やるやつかしら。

つかれた・・

 

2日目：Webデザインの本を読む

Chapter3 配色  （90分）

RGBや、明度、彩度、色相など色の基本的な事から
WEBデザイン特有の配色時気をつけることとなど。
リンクの色、色の見え方が違う人への配慮、等。


トーン
明度と彩度を使った色のグループ
トーンを意識する事で効果的な配色を簡単に作れますよという話
＞「このwebページはドミナントカラーにしよう！」とか考えている人いるのかね？
実践には使えなさそう・・

 

補色・類似色 配色
・補色を使う事で強い印象を与える
・類似色を使う事で統一感を出す
＞これは割と自然にやりますね。

 

12色相環を利用した配色
・一定の法則で規則的に選ばれた色は調和するという原理がある。
＞これは使えそう。配色苦手だからいつも本当に悩むんだけど、
法則に当てはめて自分で考えない方が上手く行きそうな気がする。
何かいいサービスで簡単に配色できないかね。

 

色の印象
・色の与えるイメージを使って上手くデザインしましょという話。
暖色寒色、後退色進出色とか。
＞美術の授業でやるよね。

 

カラーモード

RGBだと色相を保ちながらの微調整
がむずかしいので、カラーモードはRGBにして「HSB」のカラーピッカーを使用する。

・RGBの場合はディスプレイごとの見え方の差異、
屋外で見たときを考慮する必要がある。

・RBGは16進数という、アルファベットと数字でRGBを置き換えることが出来る。
＞はて、いつつかうんや。


利用者の視点に立った配色

・たくさんの人に伝えたい情報は、利用者の視点に立ってデザインする。
例えば、白内障や色弱の人を考慮する必要あり。

サイトのコントラストをチェックするツールがあるから、
公的なサイトや、高齢者を対象としたサイトの場合には積極的に使うべし！
WCAG Contrast Checker

 

Webサイトで使う色数は3〜4色が望ましい

Photoshop illustratorでは 色の見え方が異なる人の視覚を擬似的に再現もできるので必要があればしようしてもよい


Webサイトの目的にあった配色・比率

 

・配色のセオリーは大きくわけて2つある
1 メインカラーをひとつ決めて、それを中心に配色をきめる
サイトに合う写真を元に配色を選ぶ

・よく使われる配色
「70：25：5」
ベースカラー70・・・・・背景、白とか
メインカラー25・・・・・コーポレートカラーとか
アクセンカラー5・・・・・注目パーツに使う。激しい色でも割合少ないからなじむ！

・Adobe Color CCいいよ
画像からカラーを自動生成してくれるからよいよ。
Dreamweaverにも使える。

 


リンクの色の扱い
さあ、ウェブっぽくなってきたやっっと。

リンクの基本＝青
すでに踏んだリンク＝紫
検索エンジンはみんなこれやね。
A/Bテストの結果これがリンク踏まれる率がたかかったそうな

リンク＝青にすると踏まれやすいと言える。
サイトのトンマナに合わない場合は？・・・・メインカラー＝リンクの色にすると
ユーザーが認識しやすい。

 

また、カーソルを合わせたときに「画像が明るくなる」「暗くなる」とかは
すべて統一すべし！バラバラだとユーザーのストレスになるよ。

あと、カーソル合わせたら「画像を暗くする」は実装が複雑らしいよ。


サイト全体の配色はひたすら実例集をみてかくにんすべし！

今日は色についてで比較的流し読みしたかなあ。
プレゼン時説得力持たせるためにもう少し色のこと勉強しなくては。。
今まで感覚でどうにかしていた部分が多かったのだけど
絶対にタイムロスになっているので、明日から紙でれんしゅうしよーっと。

 

 

 

このブログについて

DTPデザイナー（アラサー）が働きながらWebデザイナーになるために

勉強していく記録です。

 

いまのところやっていきたい事

目標：webデザイナーとして転職！

（第一志望：興味のあるスタートアップがいい）

（第二志望：Web制作会社→経験を積んでからスタートアップに転職）

中期目標：2ヶ月でポートフォリオサイトを1から作る。

短期目標：1日最低1時間は勉強し、メモをブログにアップする。

 

 

勉強＆実践の流れ

 

Webデザインの本を読む  ＜イマココ

↓

HTML＆CSSの本を読む

↓

ポートフォリオサイトを作る→レッツ就活！

↓

Webのワイヤーフレーム作ったりプロトタイプ作ったりしてみる

 

 

ブログの目的

・頭の整理

本を読むの爆遅いし、整理が苦手なので。

 

・継続するモチベーション

クソ飽き性なので

 

・発信（今後）

もっと読みやすくして、誰かの参考になるくらいにはしたい

 

 

I HAVE NO TIME

スタートアップ中心に面接は受けたけど

Webの実務経歴はおろかスキルなしなのでほぼ全滅。

 

アラサーで勉強し始めてIT業界に入るのは遅いと思う。

体力気力的にも20代前半の子には勝てないし、中堅のこの年齢で

ポテンシャル枠で採用してもらうのは大変狭き門な事は理解しているつもり・・

 

とりあえず地道に頑張ります。

時間は限られているけど新しい事勉強するのは楽しいはず。

たとえ希望通り転職出来なくても、このスキルは絶対に役に立つはずだし

何もやらないより絶対にいい。

飽き性なのでやっぱ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のターゲットを広げすぎるはよくない。が、
全世代ターゲットにするならamazonやgoogleのように装飾的なデザインを減らし、
コンテンツの伝わりやすさを重視する必要がある。
＞ほう

デバイスも考慮する
＞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や！

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

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

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

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

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

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

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

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

つかれたf・・