20240425デジLIGリーダーズ講座：実装者目線から見た、デザイナーに必要な力
こんばんは。お疲れ様です。前回、参加できなくて悔しい思いしていたリーダーズ講座、今回は参加できました‼‼
有益情報をたくさん摂取できましたので、ここにまとめて置こうと思います。主に参考サイトのリンク集になります。
こちらのリーダーズ講座の、24年4月バージョンに参加しました。
1.基礎知識
1-1 OS、デバイスなど環境による挙動や見た目の違い
スクロールバーの挙動が異なる
タッチデバイスだとマウスオーバーという概念が無い
1-2 Webサイトで使用するフォント
必要な分だけダウンロードする日本語フォントの仕組みがあるらしい。
同じフォントでもOSによって見え方が変わる場合がある！MacとWinでも、同じフォント名でも見た目が大分違うフォントがあったりします。自宅-Winで作業、デジLIG-Macで続きをしようとして、文字が全部崩れたこともありましたっけ…（フォント入ってなかったらそうなるよね）
1-3 アニメーション（イージング）
アニメーション、ニュアンスが伝わらなくて苦労した覚えがあります。イージング！そうか、これを見せながらお伝えすれば良かったのか…！と目から鱗が落ちました。半年前の自分に教えてあげたい。
1-4 CSSの単位
相対的な単位と絶対的な単位の使い分け。
2.研究・観察の習慣
2-1 上質なWebサイトを見る
日本のwebサイトのデザイントレンドを知っておく。日本語は独特というか、特殊な文字なので、英文ではなく日本語で作られたサイトも見ておこう。ただ、かっこいいなーと眺めるだけではなく、なぜ「かっこいい」と思うのかを言語化するように。フォントなのか、色なのか、動きや使用感なのか。など
SANKOU！は制作会社やサイト制作者名もかいてあります。
PCだけでなく、スマホやタブレットでも実際に上質なサイトを触ってみる。
2-2 Webサイト以外も参考にする
アプリ、ゲーム、カーナビ、飲食店のタブレットなど、GUIで操作するあらゆるものを細かく観察してみる。
3.設計時の想像力
これ！！とても知りたかった情報です。固定知または相対値で作った場合、どういう見た目になるのかをテストしているサイトです。横幅が増減するから、サイトデザイン、数値に落とし込む時どうすんねんを解決してくれそう！すばらしいです。本当にありがとうございます。
コンテンツの量の増減を考慮する
最近、仕事でこれの対策をしました。最大文字数、最大文章量は意識して作成する。
サムネイルのサイズ
サイズ固定でデザインした場合、サイズ外のものが素材としてきた場合どうするかを仕様として考える。運用しないと分からない事もあるけど、最初から決めておいた方が絶対いいです。
4.コミュニケーション
4-1 テキストで伝える
打ち合わせや会話した内容も、ログで残しておくことで後々役に立ちます。リスクとコストを減らすことができます。
最近、酒呑みながら何かを決めた時、次の日になったら内容を覚えてなく相手方に確認したら認識が違っていた事があり、せめて日時だけでも文章で残しておくべきだったと反省したことがありました。人の記憶力に頼らない。
絵だけで伝わらないデザイン内容をテキストで伝える
デザイナーさんが作成したXDのデザインデータを講座中、みせていただきました。全体感やアニメーションのイメージのメモをデザインとともに書いてあって、これは伝わりやすいなと思いました。生のデザインデータを見る機会は少ないので、貴重な資料でした。
動画で伝える
分かりやすいですが、制作コストやスキルが必要で一長一短ありそうです。
まとめ
参考サイトをたくさんお伝え頂いたので今後、役に立てる為にまとめさせていただきました。特に、イージング見本サイトとResponsive Samples by unshiftは神サイト、ics.mediaは界王神サイトと云わざる得ない。
Xでは書ききれなかったので、noteでまとました。リーダーズ講座、本当にありがとうございました。