コーディングを理解したうえで、UIデザインをする

今回、知り合いの方にコーディング講座を2時間みっちりでお願いしました。自分は、UIデザインの仕事が最近増えてきたんですが、コーディングのことが本当に超基礎部分しかわからなかったため、一度コーダーさんに結構お手間をかけさせてしまいました。そんなこともあって、以下の目標のもと講座受けたので学びの備忘録です。

目標：コーディングがどのようになっているか理解して、UIUXデザインの依頼を正確にできるようにする

Q. まずどうやって学んだら良い？
A. Manaさんの本を２つとも読む。
ウェブサイトの模写/トレースもいい。
やってたらそのうち覚えた。
普段使うのは決まってる。
イレギュラーだけ調べてる。

HTML、CSS、JS

基礎知識
・下から読み込まれるので、下が優先される
・シンプルに無駄なく引き算的に考えよう
・サーバーに各ファイルをアップすることでネット上でサイトが閲覧可能に

HTML
・HTMLはブロックを並べている状態
（→この考え方を根底にデザインをする）
・h1はページ内に基本一つ
（トップはロゴなど、記事ページはタイトルなど）
・HTMLはSEO的に意識すべし

CSS
・特に無駄なくシンプルに
・CSSはシンプルなアニメーションならつくれる
・基本は全てclassで指定、id指定はNG(JSが関わる時は使うこともある)
・２つの .classを持たせることもできるし、それらを個別に指定することもできる
（ex. html class=”bottun active” にはbottun とactiveをそれぞれ別でも一気にまとめてでも指定することができる。切り替えはJSが行う）

JS（JavaScript）
・ JSはかなりなんでもできる
・その分読み込むのも重い
・JSでもかけるけどCSSとは別にすべき
・いろいろな変化起こせる（DL進行中バーなど）

API、Plug-in、SEO

API
・このURLにアクセスしたらデータを返すよというもの
・GoogleやFacebookなどの本家から提供されている/外部の人が使ってもいいよというもの
・そもそもそのAPIがあるのかどうなのか確認必要

Plug-in
・APIよりも自由度が低いが使いやすい埋め込み式のもの
・SNSなどはタイムラインをサイト内に表示させることができる
https://developers.facebook.com/docs/plugins/page-plugin?locale=ja_JP
インスタ https://www.okinawastory.jp/

SEO
・マイナスのペルナルティを受けないように基礎的なルールとキーワードについて理解する必要性
- キーワードの選定ができているか？連想ゲーム的に考えてみる（場所+中華屋、親キーワード）
- Google Keywords なども使うといいかも
- ページ数が多い方がいい（1サイト1テーマ1ページ、自体の中身が薄いと意味ない）
- 行き止まりや独立したページがない方がいい
- h1タグは各ページに一つ。ブログ記事の場合は、h1をタイトル、ロゴなどを〈div〉〈p〉にする。
- 情報を網羅しているサイトは強い
- 親キーワード（タイトル、h1、meta discrption）
ex) アフィリエイト専門家 アクセル先生

・検証の見方

Windowsでは　Ctrl + Shift + C 
Macでは　　　Shift + Cmd + C 
もしくは右クリック

で「検証」の画面を見ることができる。

ElementsでHTMLが見れて要素を押せばStylesに CSSがでてくる。
consoleはJSに関して、エラーがあったりすると教えてくれる。赤は致命的エラー

わからないものがあったら、検証みてみる

例えば....
Q. 左横に文字を表示するには？
A. 「niko and...」の要素の上で右クリックしてコードをチェック。さらにStylesを見ることでどうなっているのか知れる

flexについて
・リスト表示するときは基本的につける

Q. 並び順同じなのにflex と flex-column どう違う？
A. 他のデバイスで変わる場合は必要、そうでない場合はぶっちゃけcolumnは不要

fixedについて
・どこにでも配置できる便利な配置
・けど代わりに不具合があったりもする

Q. 画像をテキストに半分重ねるには？
fixdでもいいけど、できるだけネガティブマージンで配置すべき（fixedもいいけど、不具合があったりする）

・レスポンシブデザイン

・案件によって変わる
・基本はAppleのデバイスに合わせる
・クライアントへ伝えるとき、古すぎるデバイスだったりすると崩壊の恐れがあるとだけ先に伝えるとより良い
・スマホタブレットPCでで対応するかだけ聞く（全画面パターンというのは工数的に不可）
・タブレットは基本あまりデザイナーはしなくていい→一応コーダーさんに説明はする

・モバイルファースト：コードの場合はCSSはスマホなどの小さい画面から書き始める。小→大で書く理由はスマホで開いた時に重たいPC版から読み込んでしまわないようにするため
・ブレイクポイント：768pxからタブレッット → 1024 からPC
・@media：小中大 の順で必要な分だけ書いていく

UIデザイナーとして大事にすべきこと

● 状態の把握
・アクションをした後の状態などについて明確にイメージしてデザインする
- このボタンが押された時はどうなるのか
- ログインされたら/ログインしない
- プロフィール編集時は？
- ハンバーガーを押したらどうなる？

● プロトタイピング
・サイトマップを最初に考えよう
・各画面にラベルをつけてわかりやすく

● レスポンシブデザイン
・スマホの時のデザインもつくる
・文字サイズなども統一して指定すべし
・レスポンシブを意識しながらつくる
・スマホとPCで要素が全く違う位置にあるなどは良くない。できるだけ要素を共通させるとGood

● データのの受け渡し
・画像はデータファイルそのものを渡すべき
（トリミングされた状態で渡すべし！）
・XDで渡す場合も、画像は拡大しておいたりする
(そのまま書き出すと小さすぎる)

以上、UIデザイナーが押さえておくべき基礎知識でした。基礎ばかりですが知っておいた方がいいことばかり。講師をしてくださった方、本当にありがとうございます！

残る疑問

CMSは、ワードプレスなどではない場合にどのように作るのか？
一度サーバーにアップしたファイルはどのように編集しているのか？