Skip to content
mediba+

mediba+

メディーバをもっと知る

  • ホーム
  • ヒト
  • カイシャ
  • シゴト
  • ホカニモ

About Me

John Cena

Hello word I am dashy Guy

シゴト

新卒デザイナーが入社前に知っておきたかったこと【mediba Designers #03】

2020年8月26日2022年8月25日

medibaのデザイナーたちが、取り組みや知見を月イチで発信していく連載企画「mediba Designers」。

第3回はUIデザイナーのルーキー、新卒1年目の田中貴哉(たなか あつや)。念願のデザイナーとして働き始めた彼ですが、いざ業務に取り組むと学校では習わなかった実務ならではの学びが満載……!

その中でも、特に大事なデザイナーとしての心得を7つ紹介してくれます。


初めまして。6月からUIグループに配属になりました、入社1年目の田中です。

現在は、au Webポータルのチームで主にバナーデザインの担当をしています。配属直後からリモート勤務ですが、学びの多い日々を過ごしています!

専門学校を卒業しデザイナー志望でmedibaに入社した僕ですが、今回はたくさんの学びの中から、入社前に知っておきたかったことをバナー制作の手順に沿ってまとめてみます。

▼まずは競合調査から

さぁ、デザインするぞ!と言っても、いきなり作業するわけではありません。

手を動かし始める前に、競合サイトや同じジャンルのデザインを収集し、共通点を見つけることが大事です。デザイナー目線ではなく一般的なイメージを知ることができ、あしらいの参考になることも多く、最終的な成果物のクオリティ向上のためには必須の作業です。

リサーチにはPinterestを活用することが多いです。また、普段の生活から周りのデザイン(街の看板や電車の広告、CM、パッケージ、etc…)を意識して見ることも意外と勉強になります。

競合デザインをキャンパスに並べている様子

▼デザイナーではない人に意見をもらう

「デザイナー目線ではなく一般的なイメージ」というのは制作が始まってからも意識する必要があるので、デザイナー以外の人にも意見をもらうことが大事です。

ユーザーに近い率直な意見をもらえたり、自分では気づけなかった発見が生まれることがよくあり、良い方向に軌道修正できるきっかけになります。

▼依頼者にイメージ確認

ほとんどのデザイン業務は依頼する人がいます。なるべく早い段階から、依頼者の方に作成しているデザインの方向性が正しいのか確認をすることがとても重要です。

理由としては、出来上がったときにイメージと違った場合にデザインを作り直す作業が発生してしまうから。ラフの段階から確認をしてもらう習慣を付ければ、さらに信頼度も上がるイメージがあります。

▼「かっこいいデザイン=良いデザイン」ではない

レイアウトをキッチリ整えることは大事ですが、入れ込む要素の情報設計ができていなければ良いデザインとは言えません。

情報に優先度を付けて、何を目立たせるか、何を伝えたいかしっかりと決めた上でレイアウトを整える。原則やレイアウトはあくまでも手段として、一番に考えるべきは「デザインで目的を達成する」ということです。

▼デザインチェックは実機で

作業しているPCの画面だけではなく、実際に表示する媒体で確認をすることが大事です。

例えば文字サイズを小さくしたい場合は、最小サイズを実機で可読性を確認しながら決めると、ミスも減りますし作業効率UPにもなります。

また、依頼者の方に制作したデザインを提出するときも、一緒に実機確認のリンクも共有すると認識のすり合わせができますし、何より親切です!

Figmaの実機確認機能(PC)の画面

▼1ピクセルにこだわる

デザインの最終調整段階になってきたら、1ピクセル単位で細部を詰めていきます。細かいところまでこだわることで、ユーザー(と依頼者)からの信頼に繋がります。

ただ例外もあり、解像度の高いディスプレイ向けに作成する場合は2倍(3倍)サイズで作成をするので、文字サイズ要素の幅などはすべて偶数で作成します。

▼全ての要素に意味をつける

デザインは、すべての要素に意味がある必要があります。色、あしらい、フォント、文字サイズ、カーニング、余白……要素は数え切れませんが、目的と課題、ターゲットに合わせて、すべてに意味のあるデザインをすることが大事です。

バナーの効果が上がるだけでなく、デザインをプレゼンするときの説得力が格段に上がります。

▼番外編:Photoshopの画像アセットの生成機能

つい最近知った機能なのですが、Photoshopの画像アセットの生成機能がとても便利です。アセット機能とは簡単に言うと、書き出し、リサイズ、圧縮を超簡単にできる機能のことです。

「ファイル→生成→画像アセット」でチェックを入れた上で、アートボード(レイヤーも可能)に拡張子を付けるだけで同じディレクトリに画像を自動生成してくれます。

Photoshopでバナーを作成する際は、納品までに書き出し回数が多いので、この機能を使うことで効率よく作業を行うことができます。

詳しい使い方などはこちらをご覧ください。

レイヤーからの画像アセットの生成

さいごに

僕が2ヶ月間の業務を通じて経験し学んだことをまとめてみました。

すでにデザインを生業としている方にとっては当たり前のことかもしれませんが、良くも悪くもデザイナーとして働き始めたことを実感できる学びでした。

デザインの勉強をしている学生さんや、同じような駆け出しのデザイナーの方に少しでも参考になれば幸いです。

************
そんなmedibaで一緒にものづくりをしませんか?
少しでもご興味を持っていただけましたら、こちら↓からどうぞ。

採用ページ(mediba)
採用ページ(Wantedly)

Tags: mediba DesignersUIデザインデザイナー

投稿ナビゲーション

Previous: “メンバー全員”でチームを運営する方法【ちょっと教えて!突撃ee部!】
Next: 【ホンレコ!】10冊目『1分で話せ』

関連記事

「若い世代を中心にmedibaの風土づくりを」2020年の営業がスタートしました!

オンラインでも「気軽に雑談」する方法【ちょっと教えて!突撃ee部!】

mediba Creator × Engineer Blog更新しました

最近の投稿

  • エンジニアにはどんな種類があるの?medibaエンジニア職種を紹介!
  • 社員の行動指針“Value”ってどんなもの?10名のエピソードから紐解く!
  • 購入総額100万円以上!? UIデザイナーが愛用する、オーダーメイドのベースとこだわりの機材たち【マイレコVol.9】
  • 【猫の日】2月22日は「にゃんにゃんにゃんデー」! 集まれmediba社員の猫たち part2
  • medibaを詠む。社内で川柳大会を実施しました!

タグ

#デジタルを贈ろう 8cafe au Webポータル auゲーム au占い Daily Habits mediba Designers SDGs UI UIデザイナー UIデザイン UX UXデザイナー UXデザイン Vision イベント インタビュー エンジニア オフィス テレワーク デザイナー データアナリスト バックオフィス ビジネス ホンレコ ワークショップ 人事 働き方 六一ランチ 六本木一丁目 内定式 採用 新卒 江幡 研修 社内イベント 社員インタビュー 社員紹介 社外インタビュー 福利厚生 移転 総務 編集者 考え方 趣味
  • medibaコーポレートサイト
  • seasorizeカンパニー

関連リンク

  • mediba Creator × Engineer Blog
  • seasorize ブログ
  • mediba編集部 note

© 2012 mediba inc.