WEBデザインを学んでみた話

今、プライベートで関わっている団体のHPを立ち上げたい!と思って、WEBデザインについて学んでいます。
とはいえコーディングとかではなくWEBデザインのほう。
HP立ち上げってコーディングの知識が必須と思っていましたが、簡単なページであれば、必ずしもそうではないのですね・・・

コーディングってこんなイメージ。
正確には「プログラミング言語でソースコードを書く」・・・らしい。
無理。

そんな折、ふとしたことがきっかけで、とあるオンラインデザインの学校に通う事となりました。
単なるWEBデザインの知識を習得する場でなく、ちゃんとデザイン(色やフォント、レイアウトなど)について実践ベースで学べ、講師からのフィードバックがあるってのが決め手でした。

そのWEBデザインを手掛けるのに使っているツールが「Figma(フィグマ)」と呼ばれるソフト。
何でも、世界のデザイン関係者約3,000人に聞いた「2022年に最も使いたいツール」のアンケートで1位を獲得したツールだとか。
「無料で使えて(←ココ大事)」「初心者でも学びやすい」のが人気の秘訣。

ロゴイメージ

スクールでは、そのFigmaを使って、さまざまなデザインを学んでいくのですが、ここでデザインの知識、すなわち「フォント」「レイアウト」「色」などについても学べるわけです。
完全オンラインであり、基本は配布された動画(とテキスト)を見ながら、実際に手を動かして見本と同じWEBデザインを作っていくというもの。

そしてこのスクールの素敵なところは、カリキュラムのところどころで「採点」があるところ。

また個人的に、デザインスキルで最も重要なのは「誰に」「なんのために」の部分をきちんと設定できるかどうかだと思っているのですが、そのためのフレームワークであるヒアリングシートも無料で提供いただけます。

ヒアリングシートの一例

ヒアリングシートをきちんと埋めた上で、出題されるテーマに沿って作品を作成し、プロのデザイナーによる採点が行われます。
そしてフィードバックという流れ。
では実際に僕の作品とフィードバックを見てみましょう。。。

①テーマ「2分割のレイアウトでスイーツバナーを作る」
下の2種の写真を使って、20代から30代のスイーツ好きにアピールするバナーを作りなさい・・・というのが今回のミッション。

作っていてテンション上がるお題

②作品作成と提出
レイアウト、フォント、色について、作成意図を説明すると・・・
【フォント】
・ターゲットがスイーツ好きの20代から30代ということで、「親しみやすさ」を意図してラフ系のフォント&フチ文字を使用。
【レイアウト】
・並列だと物足りないので、斜めに配置して動きを(写真左とその下)
・それっぽいあしらいを散りばめて賑やかし
・スイーツのシズル感を伝えたかったので、アップ目に配置。
【色】
・商品に合わせて商品名の背景に配置
・商品を見せたかったので、透過処理

その昔、だれかが「デザインを求められたら最低3種を作るように心がけると上達するよ」と聞いたことがあった(気がする)ので、3種作りました。
ちなみに推しは左下の作品です。

調子に乗ってに3種類提出

③ダメだし(講評)
提出して3日後・・・そう、3日後にフィードバックは突然やってきます。めっちゃ早い・・・
ドキドキしながら開封すると・・・

かの赤ペン先生ばりのフィード

見てください、このおびただしいコメントの数を。。。
そして実質、1種類しかフィードバックの対象にならなかったという痛恨の極み。。。推しはどこいった?

しかしご覧の通り、めちゃめちゃ丁寧なフィードバックです。
レイアウト、フォント、色、あしらい・・・全て何かしら修正される。

主な指摘は
1.商品をタイトルで隠すのはNG←これで左側ゾーンの案はボツに
2.ターゲットはナチュラルさを好む層でもあるので、フチ文字は使わない
3.あしらいが写真とあっていない。見えづらい
4.色は透過させない方が強い印象を与える
5.写真は圧迫感があるので、引きで出した方がシンプルさが出て良い

・・・なるほど。。。

④再提出
講師のアドバイスをもとに修正したのが↓の写真

↑無難な修正笑

⑤お手本公開
最後に講師のお手本が送られてきます。

「これが正解ではない」ってコメントが良い

普段、プロに作品を見てもらいかつ講評される機会は無いのでめちゃめちゃ勉強になります。
もちろん、このデザインが必ずしも正しいわけじゃないけれど、少なくとも自分のデザインに足りないものが見えてくるし、視野が広がるきっかけになると思います。

ここまで、僕の実例をもとに描いてきましたが、第三者の視点というのはものすごく大事で、、、でもその第三者は誰でもいいってわけじゃなく、それこそ最初に設定したターゲットがどんな反応を見せるか。というのが大きなポイントです。

これは広報も一緒で、よく言われるのが、「家族に見せて反応を探る」。
本当に良い方法だと思います。家族は一番身近な読者。

ちなみに、広報コンクールで読売新聞社賞を受賞した広報紙。
テーマは「フードロス」だったのですが・・・

原稿案を作って最初に嫁に見せたところ、第一声が「何書いてあるのか全然分からない。」でした。

表紙はその土地の名産で作った日本地図という凝りようだったのですが、、、
気づいてすらもらえず

学びは続くよどこまでも

ここまで書いてきましたが、デザインの道のりは長い。
でも楽しいです。
団体のWEBデザイン立ち上げは来年3月の見込み。
その時はまたこちらで公開しますね。
ではでは

この記事が気に入ったらサポートをしてみませんか?