見出し画像

【WEBデザイン勉強法】ギャラリーサイトに掲載されるまでの実践ガイド

KKI DESIGN

KKI DESIGN デザイナーのイワタです。
今日は、私が独学でWEBデザイナーにジョブチェンジしてから憧れだったギャラリーサイトに掲載されるまでの勉強法ややってみたことをまとめてみました！

出典：MUUUUU.ORG / SANKOU!

  • 私と同じようなデザイン領域を展開したいグラフィックデザイナー

  • 駆け出しのWEBデザインビギナー

に向けて、参考になれば幸いです。


はじめに：独学前の私のデザインスキル スペック

まずは私のデザインスキル スペックを。

・大学時代はグラフィックデザイン専攻
・食品パッケージ製造業の株式会社KKIにパッケージデザイナーとして新卒入社
・パッケージデザイナー歴3年目の時、自社サイト立ち上げのため、WEBデザイン初挑戦へ…
・当時のWEBデザインの知識レベルは、大学時代の授業でjqueryを触ったことがある程度。ほぼ知識ゼロ。

「自分のデザイン制作領域の幅を広げたい」と考えて、もともと興味があったWEBデザイン担当に立候補したのが始まりです。
しかし、当時はWEBチームが発足しておらず、WEB制作の経験があるデザイナーもいませんでした。そのため、必然的に独学で挑戦することになりました。

私の目標設定

そこで独学でWebデザインスキルを磨くにあたり、スキルや質の高さの基準として、学び始めた当初から見ていたWEBデザインギャラリーサイトへの掲載を目標にしました。
先輩WEBデザイナーが周りにいない独学の中で、掲載=私のスキルに対する第三者からの評価の1つだと思ったからです。
「いつか私もこのサイトたちと肩を並べられるようになろう！」というのがモチベーションでもありました。

1.WEBデザインの基本作法を学ぶ

グラフィックデザインとWEBデザインでは、使用するサイズの単位が異なるため、文字の大きさや扱い方も異なります。
パッケージデザインの感覚で制作すると、見出しが大きすぎたり、本文が小さすぎたり…
視線誘導し、情報を読ませるという目的では、個人的にWEBデザインはエディトリアルデザインに近いように感じます。
ツール(当時はXD)の使い方を簡単に学んだ後、まずは「WEBデザインの感覚やルール」を身につける学習から進めました。

【①WEBサイトのトレース】

独学でトレースは基本の”基”ですね！
画家が画力を上げるためにドローイングや模写をするように、デザイナーがデザインスキルを上げるだめには「いいデザインの模写」をするのが近道だと考えています。

パッケージのデザインスキルを磨きたい時もよく模写をしていたので、まずは模写から！と思い、ツールに慣れるためにも手始めにWEBサイトのデザイントレースを行いました。

当時はいろいろな模写のやり方をしてみましたが、MUUUUU.TV(ムーテレ)のムラマツさんが紹介する高負荷模写が効率よく吸収できると感じています💪

出典：MUUUUU.TV(ムーテレ)　デザイン力を最速で高める高負荷訓練「トレース訓練」の正しいやり方を経験15年が紹介します

【②WEBサイト デザインレビュー】

高負荷模写は、負荷が高い分どうしても作業時間がかかってしまうため毎日1サイト…という継続が私には難しかったです。
そのため模写はできないけど…という日にも気になるサイトを見つけてチェックするようにしました。
しかし必ず見て終わりではなく、デザインレビューとして言語化(アウトプット)を行います。

当時のデザインレビュー


2.WEBデザインの習作

ある程度WEBデザインのセオリーを掴んだら、本格的なアウトプットです！！
UIをはじめとした無料のデザイン学習サービス「cocoda!」(※サービス終了)のトレーニングお題で、架空サイト制作に取り組みました。

ペルソナ設定からベンチマークデザインまで詳細な設定があり、架空サイトの制作に取り組みやすいお題を提供されていましたが、現在は残念ながらサービス終了してしまったようです。

同じような学習中の方が、制作したデザインをアップし、閲覧できる仕様だったため、自分のデザインと比較して勉強になりました。

cocoda!のお題をもとに習作

もし現在進行形で架空サイトのテーマ設定にお悩み中の方は、chot.designさんのお題もよさそうです。
ワイヤーフレームをはじめ、詳細な設定があり、実際の制作に近い形で架空サイト制作に取り組めそうです。


3.実践的なノウハウを求めて

少しづづWEB制作に関わるようになってからは、より実践的なノウハウを求めたくなりました。
書籍はツールの操作に重点を置いているものが多く、YouTubeでヒットする動画は具体的なハウツーが物足りない…
独学環境では情報が入ってこないため、自分から生の情報を取りに行かなければなりません。そこで実践的なノウハウを求めて、いくつか施策を行いました。

【①業界のトレンドや情報収集のための環境づくり】

すでに多くの人が情報を求めてSNSを活用していますが、
私もその一人として、X（旧Twitter）でWEB制作業界で著名な方々をフォローし、情報が入ってくる基盤を整えました。
自然と情報が流れてくるため、WEB制作に関するセミナー情報や有益な書籍 / コンテンツについても情報が得られました。

特に学びが多く、今も勉強させていただいる方々やコンテンツをご紹介します。

👉M-HAND.incの岩松さんのチェックバック

私はまわりにWEBデザイナーがおらず、先輩からフィードバックがもらえる環境ではなかったので、プロはこのような視点でフィードバックし、このようなブラッシュアップ過程を経ているのか…ﾌﾑﾌﾑ📝と拝見しておりました。

👉Beigeさんのオウンドメディア『未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開』

参考書兼問題集であり、約140ページ分の内容が詰まっているドリルを公開されています。
WEBデザイナーが身につけておくべき、WEB制作の知識を包括的に身につけることができました。

👉QUOITWORKS Inc.ムラマツさん / MUUUUU.TV(ムーテレ)

http://youtube.com/@muuuuu_tv

先ほどサイトトレースの効率的なやり方でも紹介した、QUOITWORKS Inc.のムラマツさんが発信するMUUUUU.TV(ムーテレ)です。
現場でしか学べないような貴重なノウハウを発信されており、どの動画も見返すくらいとても学びになります。
特に、新人デザイナー3名による架空サイトデザイン対決企画「デザインブレイキングダウン」が好きです！

【②国外からの情報収集】

情報収集の幅を広げ、国外からも情報を探すことにしました。 世界的に見て英語圏の方がユーザーが多く、情報量も豊富だと考えからです。
そこで英語が不得手な私は、趣味で勉強していたなけなしの韓国語スキルで、韓国のyoutuberでありUI/UXデザイナーのマディアさんの動画を見つけました。

出典：Madia Design ／ 基本が足りないデザイナー歴5年の視聴者のWEBデザインをレビュー

自動翻訳の字幕機能も駆使しながら視聴しています。
視聴者作品レビュー動画では、具体的なブラッシュアップ例を作成してくれるので、とても勉強になります。
視聴者の多くは新人デザイナーで、私と同じ立場の方が多いため、非常に参考になりました。
また時々デザイナー志望の学生視聴者の作品もあり、そのクオリティの高さがモチベーションになります💪

UIやUXに関しても、英語圏は情報源が豊富ですね。

こちらのサイトではUIの良い例/悪い例を比較し、わかりやすくデザインTipsが詰まっています。

こちらはクイズ形式でUIを学ぶことができるサイトです。
二択の画像から、どちらが優れたUIか当てるクイズで、問題が進むにつれて難易度も上がります🔥


4.デザイン迷子になった時のために！秘伝のTips集作り

WEBデザインを学んでいく中で、だんだんと自分の目も肥えてきます。
すると俄然自分のデザインに物足りなさを感じ、ギャラリーサイトに掲載されているサイトとのクオリティの大きな差に悩みます。
独学で差を縮めるためには、自分で自分のデザインと向き合わなければなりません…
そこでデザイン迷子になった時に、ヒントが得られるブックマーク集を用意しています。

notionにまとめたTips集

先に挙げた方々が発信している情報や、有益な記事をブックマークとしてnotionに保存しています。
デザインに行き詰まったら、このページを開いて、いつでもデザインのヒントが得られるようにナレッジを蓄積しています。

おわりに

現在は社内に中途入社のWEB制作経験のあるメンバーも増え、WEB制作チームが発足までになりました。
今ではチームで定期的な勉強会も行い、より質の高い制作を目指しています。
決してギャラリーサイトに掲載されることがWEB制作自体のゴールではありませんが、デザイナー含め制作側のモチベーションに繋がると感じています。
また掲載によって、露出が増えることで、アクセス数もや企業認知度向上に繋がるメリットも実感しました。
これからも質の高みを目指していきます！

この記事を書いた人：イワタ
Xアカウント：@i_w_a_t_a_

私たちの実績やKKI DESIGNチームの詳細についてはこちらから💁‍♀️


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