Designer Page

Designer Page

Purpose

- ページの目的 -

ALCHEMY White Boxにて様々な情報を開示していても、デザイナーを目指す方にとっては「研修はどんな感じなのだ ろう…」「先輩はどのようにしてデザイナーデビューしたのだろう…」など、気になる事はまだまだ多いかと思います。 本ページでは、デザイナーを目指している方が気になるであろう情報をできるだけ開示し、少しでも不安をなくすことを 目的としています。

Curriculum

- カリキュラム -

実際にALCHEMYのデザイナー研修生が行なっているカリキュラムの一部とレビューの様子を公開します。

課題内容・目標
  • デザイン座学(目標:3days)
  • 基本操作(目標:4days)
  • バナー課題(目標:1weeks)
  • HTML / CSS課題(目標:2weeks)
  • LP課題(目標:1weeks)
  • UI課題(目標:3weeks)
  • その他:デザインタスク / 個人課題(目標:4weeks)
課題を終えた時の姿
  • UX/UIデザイナーを目指したEさんの場合
    • UI課題や個人課題を元に得意分野を活かし、上流工程(要件定義、情報設計)まで行うことができる
    • 市場分析や競合調査などを行いサービス理解を深めた状態で設計することができる
    • Atomic Design を理解し、コンポーネント設計ができる
    • 見せたい情報に対して的確なUIを提案できる
    • プロトタイピングツールをマスターして、デザインのみならず会議や提案用の資料作成もできる
    • サービス向上のためのコミュニケーションができる
    • デザイン思考を用いて作業することができる
  • Webデザイナーを目指したKさんの場合
    • デザインするにあたって必要な情報を調査・ヒアリングできる
    • あしらいや素材を自分で作成し制作物に落とし込める
    • デザインの意図を汲み取り、レビュワーとして活躍できる
    • ペルソナを理解したデザインができる
    • 適切なフォント、あしらい、カラー、レイアウトができる
    • デザイン4原則を活用し、情報を整えたデザインができる
    • レギュレーションに準じた制作物がデザインできる
    • デザイン思考を用いて作業することができる

使うツール

icon
デザインツール:Photoshop, Illustrator, XD, Figma

用途:課題の制作

icon
ドキュメントツール:Notion

用途:教材・課題の確認

icon
コミュニケーションツール:Slack

用途:課題提出・レビュー依頼

icon
コミュニケーションツール:Discord

用途:オンライン上でのコミュニケーション

fre:sta

ALCHEMYでは未経験者からデザイナーになるためのWebデザインスクールを運営しています。

Recommendation

- おすすめの本 -

現場に出ているデザイナーと研修生が読んできたオススメの学習書籍を紹介します。

icon

研修生

良かった点・参考になった点

  • 勉強し始めの方に特におすすめ
  • 情報を伝えるデザインとして「やってはいけない」ことを学べる
  • ダメな例、良い例がセットで載っているので改善策を学べる
  • 「なんかダサい」をなぜダサいのか分かるように言語化してくれているので学びになる
やってはいけないデザイン

素人デザインをほめられデザインに変えてきたプロが教えます! 本業はデザイナーじゃないのに、自分でデザインしなくてはいけない、 素人デザイナーさんへ。 素人さんがやりがちな「やってはいけないデザイン」と、 それを改善するためのノウハウをやさしくお教えします。 本書の著者は、素人デザイナーさんを多数教えている、本職のデザイナー。 実経験に基づく、素人デザイナーさんのリアル失敗ポイント、ココが惜しい! というポイントを余すところなくレクチャーします。 チラシ、ポスター、プレゼン資料、広報誌。知っているだけで 仕上がりが大きく違ってくる知識とノウハウ。 「レイアウトに迷う」「色が決まらない」「フォント選びに悩む」 「かっこよく作れない」「素人くさい」など、お悩みを解決します。 ビフォーアフターで、どこをどうすると改善されるのかを わかりやすく解説するコーナーも必見です。 【こんな人におすすめします】 チラシ(お店、自治体やNPO、イベントなど)、社内プレゼン資料など、 デザインを自分で作る必要がある人。デザイン勉強中の社会人、自営業者、学生 【本書の内容】 巻頭 こんなデザイン、やっていませんか? 名刺/スライド/ポスター/チラシ 第1章 原稿編 第2章 レイアウト編 第3章 文字・フォント編 第4章 カラー編 第5章 写真・イラスト編 【著者紹介】 平本久美子: グラフィック/WEBデザイナー。奈良県生駒市在住。1976年生まれ、横浜市出身。 2000年よりフリーランスで活動中。企業や教育機関のWEBサイトをはじめ、 自治体のチラシ、ポスター、パンフレットなどをデザインする傍ら、デザイン専門書籍の 執筆活動も行う。また、デザインを通して地域と関わりたいという思いから、 地域住民を対象としたチラシ作り講座の講師をつとめる。専門用語を使わず、 初心者にもわかりやすい講義は好評を呼んでいる。

やってはいけないデザイン

良かった点・参考になった点

  • バナー作成における、情報整理の大切さや注意すべき点、デザインの工夫やテクニックがすべてまとまっている
  • バナーのお題が掲載されているので、実際に手を動かした自己学習に役立つ
  • 修正前と修正後を比較しながら説明しているので、良し悪しを学べる
  • 実例が多いため、レイアウトや配色などの引き出しが増える

icon

出向しているメンバー

良かった点・参考になった点

  • デザインの初稿からFIXするまでの過程が記載されている
  • デザインの注意点や新しいを着眼点を得られるので、駆け出しデザイナーのみならずレビュワーにもおすすめ

Skill

- スキル感 -

デザイナーデビューを果たした人が、研修期間中に課題を経てどのように成長したか Before / After 形式で一部紹介します。

icon

Case1「ブログ誘導バナー」

Before

image

After

image

Review

image
研修生

“デザイン初心者が知るべきこと”ブログ誘導バナーを提出します!

■ターゲット設定 ・デザイナーになりたての20代男女

・デザイナーを目指すために、勉強を本気で始めようとしている人 ・デザインに興味があり、学び始めた人

■カラー選定の意図

・ フォントや図形は白と黒でシンプルに。デザインブログのバナーということでシンプル系やポップ系よりはモード系が馴染むと思い、この色に選定にしました。

■フォント選定の意図

・ タイトルは明朝体、リストにはゴシック体を使用して明確に差を出しました。タイトルの一部を縦書きにして自然と目を引くように。

・レイアウト、全体の意図 中央には反復を用いてブログ掲載内容を箇条書きで設置。テキスト中心のバナー希望だったので、できるだけイラスト等は入れず文字だけで全体の骨組みを作りデザインしています。背景画像は暗い中に少し色が入っているものにして白い文字が際立つようにしました。

image
レビュワー

レビューします!

■良き点 ・配色ルールについてはとってもいいと思います!品良くグラデーションも効いていて背景としてはいいものなんじゃないかな?と! ・フォントの選定に関して、コンテンツごとに "明朝、ゴシック" と変える事で、意図的に差別化を図っている点もやり方として◎

■修正点 ・タイポグラフィ「デザイン初心者 / が知るべきこと」の「/」の箇所で切られてしまっていますが、接続詞を「〜初心者」につけてあげたほうが、文章として成り立ちます!また次のテキストに誘導しやすい物になりますので、調整してみてください。

・あしらい 反復の箇所はユーザーが 興味を持った後に見たいと思う内容(このバナーにおけるメインコンテンツ)です。箇条書きにすることでリズムをつけていることは伝わりますが、ただテキストを置いただけ感出てしまってますので非常にもったいない!もう少し工夫をしてみてはいかがでしょうか?

・余白「デザイン初心者 / が知るべきこと」の周りの余白が少し狭いです!テキスト周りにあと少しゆとりを持たせることで、パッと見た際、情報の入りにスムーズさを持たせることができると思います。

・余談 ルビはトリでタイポグラフィを考えてみるのもいいかも。ターゲット(デザイナーを目指している年齢層)を想定した時にルビの必要性があるのか。

image
研修生

■修正後

「“デザイン初心者が知るべきこと”ブログ誘導バナー」修正版です!全体的にレイアウト・背景ガラッと雰囲気を変えてみました。

■変更点 ・ターゲット層を20代に設定しているので、改めて配色含め、デザインを見つめ直した。

・当初、反復パターンを縦のみでしか考えていませんでしたが、レイアウトを変更しました。

・優先順位を整理し、プロが教えるを小さめにしました。下に吹き出しをつけ、左上の足りない感じをなくした。

・遠目から見ても綺麗に見えるよう、確認しながら配置しました。

・全体のルビを取った。

・ボタンをやめ、帯にした。

・“デザイン素材サイト”の“デザイン”の部分をとって情報をすっきりとしてわかりやすくした。

icon

Case2「ゴルフ専門店バナー」

Before

image

After

image

Review

image
研修生

ゴルフ専門店バナー レビューお願いします!

■ペルソナ設定 ・47歳男性 経営者 ・ややワイルドでダンディーな雰囲気 ・10年前に離婚して今は一人暮らし ・趣味はバイクとグルメ ・ハマるとのめり込むタイプ ・良いものを長く使い、物持ちがいい(革など味出てくるもの好き) ・休日はゴルフかツーリング ・海外旅行も好きだが、コロナで行けなくなってしまったので友人に誘われゴルフを始めた ・初心者向けのパターを使っているが、もっと合うものがあるのではないかと思っている

・サマーキャンペーンだけだと写真を見て初めてゴルフに関係するものだとわかるため、キャンペーンと共に視界に入るように、『ゴルフ専門店』を加えた。

・経済的に余裕があり、値段よりも良いものを購入したいという思考が強いため、販売ページへ誘導するきっかけとしては、お得感よりクオリティの高さを印象付けられるように、下部の文言を加えた。

・セールの詳しい情報(日程)は、セールに興味を持って初めて必要とされる内容なのと、今回のペルソナでは、あまり特典は響かない内容なので、小さく配置した。

image
レビュワー

■良き点 ・高級感と夏らしさのあるカラー選定が良き良き ・ペルソナ設定も細かくできてますね! ・背景のぼかし、いい。

■修正点 ・優先順位 → サマーキャンペーンが一番上位になってますね! ・ボタン → 中央に配置してあげてください! ・タイポグラフィ → 情報の強弱が弱いです。優先順位を洗い出して、どのように見せれば優先順位通りになるか考えてみましょう!

image
研修生

■修正後

ゴルフ専門店バナー 修正版です! 良き点をあげていただいたところがもったいなかったのですが、修正点に注意して大幅に変更しました。新たに修正点出てきたらすみません。

■変更点 前回は『夏らしさ』に重きを置いたカラー選定だったが、目的はゴルフ用品を買ってもらうことなので、ゴルフ用品のバナーだと瞬時に伝わりやすいように緑を選んだ。緑 → 夏の深緑、ゴルフ場の芝生目立たせたいフォントは、爽やかさをプラスするために白を選んだ。

Interview

- インタビュー -

ALCHEMYのデザイナーメンバーを紹介します。

icon

Member 1

image
  • ニックネーム:ベティ
  • ポジション:デザイナー
業務内容

研修課題、社内報作成を行っています。

一日のスケジュール
image
入社前と入社後でSESの印象はどう変わりましたか?

SESに対するイメージは入社前と特に変わっていません。

私は幅広い業界のデザインを手がけていきたいと考えていたのですが、SESという環境は様々な案件を経験できるため、私がやりたいことと一致しているなと感じました。

たくさんの案件で学んで行きたいです。

入社する前どんな準備をしていたのか?

とにかくPhotoshopが使えないとダメだと思い、バナーを作成したり、良いと思ったデザインのトレースをしていました。

最近学んでいることはなんですか?

言語(HTML ,CSS,JS)、UIデザイン

icon

Member 2

image
  • ニックネーム:たかざわちゃん
  • ポジション:UIデザイナー
業務内容

私は大きく分けて出向業務と社内業務の2つを行っております。

詳細については下記になります。

  • 出向業務
    • 案件企画
    • デザイン
    • 分析
    • レビュー
  • 社内業務
    • 社内教育
    • 新規事業

一日のスケジュール
image
初めてデザイナーとして仕事をした時の所感は?

出向先で初めて任された仕事が、病院に貼るポスターのデザインでした。

しかし印刷物の経験はあまりなかったので、恐る恐る「印刷物は経験少ないんですけど入稿する際のルールとかありますか?」と聞いたら優しく入稿ルールをインプットしてくれたので、経験が少ない分野に関する質問をしても特に問題ないんだなと安心しました。

出来上がった時は「うお〜私が作ったやつが世の中に出た!!」とテンション上がったのを覚えています。

入社前と入社後でSESの印象はどう変わりましたか?

要は派遣でしょってイメージがありました。 出向している人同士は、名前も顔も知らないと思っていましたが、実はそんなこと全然なくちゃんとメンバー同士が仲良くしていて驚きました。

あと、出向先の方々も私に対して社員と同じように接してくれたので、ドラマとかで見かける派遣や業務委託の働きにくそうな感じは一切なかったです!

入社する前どんな準備をしていたのか?

SHElikesに入会して勉強していました。

あとはレビューをもらえる企画に参加して、制作物のレビューをもらっていました。

最近学んでいることはなんですか?

今はモーショングラフィック・動画制作技術・Google Analytics分析からの仮説立てを学んでます。

End Credit

- 製作者 -

icon
 

Producer

Kohei Ichiba 

Taito Morikawa

icon

Designer

Asuka Kurigami

Mina Sonobe

Mao Tanaka

Seina Sato

Ryusei Tashiro

icon
 

Cooperation

Yuto Shimada