Webデザイナーの役割ほか【体験記】2023年8月13日いいねこの記事でわかること『けっきょく、よはく。』で有名なingectar-eさんが制作したFullmeの体験記です。|【先行リリース中】デザインスクールこんにちは、涼太郎です。この記事は、デザイン書籍『けっきょく、よはく。セットコースの体験記録です。1から3の範囲で僕が学んだことのまとめをしていきます。Fullmeに興味があってこれから挑戦してみようと思っている方でもネタバレにならずに楽しんでもらえるように、かつ僕自身の振り返りに役立つような内容にしていきたいと思いますので、ぜひ最後までお付き合いくださいね。レスポンシブデザインとはこのレッスンから学んだこと自主課題ingectar-eが好きなら、Fullmeいっとこ。Designコースのはじめは「デザインとは何か?」や「Webデザイナーとは?」がテーマです。レッスンは以下の内容です。デザインとアートの違いWebデザイナーの役割とはWebデザインと紙デザインの違いWebデザイナーのロードマップについてこのレッスンから学んだことデザインとは、伝えたい相手にわかりやすく伝えるための手段である。いうのが僕なりの解釈です。ポイントは、発信者が何か伝えたい情報や課題がありそれを伝達・解決する目的がはっきりしているものについて、明確な根拠を持って情報を整理し魅力的に伝えること。伝える方法の理論としては、レイアウトとか写真編集とかフォントとかあしらいとか色々あるけれど、それよりもまず第一に「伝えたいと考えている人の要望や課題がある」というのが重要。その要望や課題を解決するための手段としてデザインがあり、伝える相手や条件によってデザインの手法を適切に選択する能力がデザイナーとしての腕の見せどころなんだと知りました。今回のクライアントはこんなことを伝えたくて、伝えたい相手はこういう属性だから、今回のデザインはこんな情報優先度でこんな雰囲気に仕上げよう!という順番でデザインを組み立てていくのですね。依頼主の課題解決を最優先に。自分が好きなデザインや色使いを押し付けているようではデザイナーとしては未熟。選択肢をたくさん持っておき、相手が喜んでくれるカードを場に出せてこそ真のデザイナーです。僕はシステムエンジニア/ITコンサルタントとして働いていたこともあり、似ている考えだなと思いました。→思ったように作れているか確認する:テスト→顧客に提出する:納品この流れなんですよね。エンジニアとデザイナーの違いは、実装工程の部分がプログラムだったり視覚的な表現だったりするくらいで、実際のところエンジニアもデザイン的な要素が必要だし、デザイナーもプログラミング的な要素が必要だったりするわけで、けっこう似通ったところがあるんだなぁというのがこのレッスンを受けてみての感想です。僕はもともとHTML/CSSなどの「コーディングがすぐに見た目に反映される」領域の分野が好きだなと思っていたので、Webデザインを学ぶことで可能性が広がっていくんだろうなと楽しみです。レイアウトの基礎レッスン2からはデザインの理論について学んでいきますよ。レッスンは以下の内容です。4大原則をはじめ、人間がどのようにして視線を動かしてモノを見るのかを知ることができるレッスンです。今回のレッスンでは、学んだこれらの要素を活かしつつ「架空のコスメ企業サイトのファーストビュー制作」をFigmaで作ってみる自主課題が最後に与えられていました。はじめということもあり移動ツールだけで操作できるカンタンな課題ですが、しっかりと手を動かしながら理解させてくれるありがたいレッスンです。素材やサンプルもあるので倣って並べてみるだけ...なのですが意外と奥深い。僕はサンプルよりもさらに横並びの整列ができるように、独自にレイアウトグリッドを追加してみました。レイアウトグリッドに沿って配置したら「整列できている!」という自信に繋がりました。Webデザインでよく用いられるという12列でのグリッドを組むことで、明確な整列の根拠が出来上がると思いました。これはこれでよかったポイントのひとつでしたが、ものによっては要素と要素の隙間が空きすぎてしまうこと(No.2とNo.3のブロックの間など)と、要素を上下で整列するときの根拠が薄いなと感じるところが課題点として残りました。レスポンシブデザインとは続いて、Webデザインの需要な要素であるレスポンシブデザインについて学ぶレッスンです。レッスンは以下の内容です。デバイス向けのレイアウトレスポンシブWebデザインとはレスポンシブWebデザイン向けのレイアウトこのレッスンから学んだことスマートフォンとかタブレット端末のことを「デバイス」というのですね。パソコンとは別のものを指す言葉なのでしょうか。僕はガジェット系の機器類をデバイスと呼ぶと認識していたのでパソコンもデバイスだと思っていたのですが、どうやらちょっと違ったみたいです。今後はパソコン向けのレイアウトとデバイス向けのレイアウトということで覚えておきます。レスポンシブWebデザインは便利だけど厄介な印象を個人的に持っていて、レッスンを受けた結果やはりそのままの認識で大丈夫そうです。いうのは、便利なのは運用管理とユーザビリティの面であって、その作成と改善においては環境ごとにレイアウトを考える必要がありふつうにそれぞれのページを個別に実装するのと同じ労力がかかる面があるからです。「ユーザが主にどの環境(パソコン/デバイス)からサイトにアクセスすることを想定するか」を前提にしてメインのレイアウトを考えて、それからメイン以外のレイアウトに展開していく、というのが大事そうです。自主課題さて今回のレッスンでも自主課題があります。2で作成したパソコン向けサイトを他デバイス用にレイアウトする課題です。パソコン向けのレイアウトをメインにして、デバイス向けのレイアウトを作成していきます。先ほどと同様に12列のグリッドを配置しましたが、白い部分が狭いと横並びにした要素が近すぎるため気持ち広めに設定しました。ガター(グリッドの白部分)を少し広めにレイアウト。工夫としては、洗練された商品のサイトということで、余白を意識しました。日本ゴシック体のフォントは手持ちのA1ゴシックに変えることで優しい印象に仕上がっていると思います。課題としては、先ほどとは逆に要素間の隙間が狭く近すぎる結果になってしまったことです。グリッドに従うことを優先した結果、ユーザに伝える力が下がってしまうことにならないように注意したいところ。ingectar-eが好きなら、Fullmeいっとこ。初級コースですが本当に勉強になります。「デザインとは」という根本の部分から丁寧に教えてくれるこんな素敵なコースを受講できて幸せです。涼太郎イギリスと革製品とSFが好きです。iPadでお絵描きしたりパワポデザインしたり。WILFRED3【Fullme】無料で学べるFigmaおためし授業、大変よい。ダレスバッグ同じカテゴリーの人気記事1【Fullme】無料で学べるFigmaおためし授業、大変よい。イギリスと革製品とSFが好きです。iPadでお絵描きしたりパワポデザインしたり。レスポンシブデザインとはこのレッスンから学んだこと自主課題ingectar-eが好きなら、Fullmeいっとこ。