GROW UPとは

｢成長を実感できる勉強会｣のコンセプトのもと名古屋で開催する勉強会・セミナーです。

Webを中心としてコーディングやデザインに留まらない
成長するために必要となる、さまざまな知識を共有する場としています。

▼今回のGROW UPの様子

▼Doorkeeperのコミュニティ

◆イベント概要

Webデザイナーを目指す方必見！現役デザイナーが実践する、おすすめの勉強法教えます！

◆開催目的

・Webデザインへの理解を深める
・スキルアップへのモチベーション向上

◆日程

4月 7日 (金曜日) 午後6:00～7:00

◆登壇者

GrowGroup株式会社の若手デザイナー2名
・髙井 美沙

・山本 凌平

今回は、新人デザイナー2人の掛け合いで進行いたしました！
視聴者側が思ったこと、感じたことを、代わりに２人のどっちかがツッコミを入れていて、
見ているこちらも理解しやすい、最後まで楽しめる講座

◆登壇内容

Webデザイナー志望の方・駆け出しデザイナーの方に向けて、
「Webデザイナーになりたいけれど、どうスキルを磨くべき？」
「興味あるけどそもそもWebデザイナーってどんな仕事なの？」
という疑問にお答えしながら、勉強法についてレクチャーを行います。
また、弊社の実際のワークフローも交え、より具体的なWebデザイナーのビジョンをお伝えします。

そもそもWebデザイナーってなにするの？

・企業のコーポレートサイトをデザインしたり
・バナーをデザインしたり
・（弊社は完全分業制ですが）場合によってはコーディングを⾏うデザイナーもいます

デザイナーは「デザイン作成」の工程でデザイン制作をします。
ただデザインだけをして終わりではなく、工程間の制作メンバーとの連携が大切になります。

GrowGroupが考える「良いデザイン」＝　顧客の価値が直感的に伝わるデザイン

どういう意味かというと、
見た目が綺麗だけではなく、ユーザーが考えることなく直感的に理解できるか使えるかどうか、
という部分をクリアできているデザインのことです。

Webデザインスキルを⾼める勉強法

今回は、時間の兼ね合いで、「02 デザインスキル」にフォーカスしてご説明します。

02 デザインスキル

Webサイト考察

Pinterestなどのサービスを使ってストックしておくと⾒やすい！
タイムスケジュール⽴てた後、実績サイト使って分析ワークショップもありです。

＜分析する項目＞
・目的
・ターゲット
・デザイン的な特徴（レイアウト / 配色 / 画像 /フォント / UIなど）
・真似したいポイント
・懸念点や「自分ならこうする」など

▼Webサイト考察ワークショップの様子

参考サイトトレース

▼やり方
1.参考サイトのスクリーンショットを表示する。
2.参考サイトのスクリーンショットを不透明度を下げて配置し、その上から模写していく。

▼意識するといい点
常に全体のデザインを意識してみるようにする。
・使われているテキストのサイズ
・マージン、パディングなど余白周り案の観察・把握

▼おすすめChromeプラグイン
・Window Resizer

・GoFullpage

▼おすすめギャラリーサイト
・Pinterest

・Web Design Clip

・SANKOU!

・現代デザイン

▼ GrowGroup ナレッジブログ
「アイデアの参考に！」現役デザイナーが選ぶ【参考サイト】7選」

サイトトレース＋アレンジ

他社のサイトデザインを⾒て、「⾃分ならこうするかな？」「こういう表現はどうかな？」
などを考えながら⾃分なりにアレンジをします。

例えば…
・サイトの目的が「お問い合わせの増加」なのにお問い合わせボタンが目立っていない
　→お問い合わせボタンで使っているカラーを変更して目立たせてみる　など…

まとめ

参考サイト考察・トレースから得られるメリット

　1. Web媒体におけるデザインの引き出しを増やす

　2. Web特有のデザインのルール（制約）への理解が深まる

　3. ユーザー視点でデザインを考える習慣をつけられる

　4.デザイン意図を的確に伝えるための言語化スキル向上

さいごに

GrowGroupには社員全体で励まし合い、共に成長していくとても前向きなカルチャーが根付いています。
この記事を読んで、興味を持たれたそこのあなた。
ぜひ、GrowGroupで一緒に働きませんか。

GrowGroup株式会社では一緒に働く仲間を募集しています