恥ずかしすぎて白目。新人デザイナーあるある | 株式会社いえらぶ琉球スタッフの本音ブログ~沖縄で一番就職したいIT企業~

知人の紹介でいえらぶを知ったまえはら。
「未経験OK！」とは言っても紹介者の顔もあるし。なにより『使えない奴』とは思われたくない！！！
40万円出してスクールに通いました。Photoshopも買いました。
Photoshop、illustrator、HTML5、CSS3を習得し、勝手にポートフォリオなるものを作り面接へ挑む！
受かる！が、実務で役立たない！！！40万円の力をもってしてもポンコツであった！！！！
そんな実務経験のない「未経験」新人デザイナーたちの恥ずかしいあるあるを紹介。

新人デザインあるある

【保存しない・落ちた】してー！ctrl+sしてー！データは財産よ！
【ローカルにデータ保存】既定フォルダに格納してー！データは会社の財産よ！
→弊社ではUSBの使用やPCの持ち出しなども厳しく管理されています。PSDデータ1つとっても大事な財産。
　データ管理の重要性やチームで制作する場合の注意点は最初のうちに理解するまで質問、確認をしましょう。

【オリジナリティで勝負】制作指示と違う！制作意図を聞くと「こっちの方がいいと思って」好み！
【写真のチョイスが個性的】可愛い女の子！住んでみたい家！好み！
→デザインには理由が必要です。
　“学生向けの賃貸 ” を多く取り扱っているのに、高層マンションや一戸建ての画像を使用するのは不自然ですよね。
　“不動産購入、不動産投資をお考えなら！”というキャッチの横にカワイイ女子高生がピースしてたら不信感でいっぱいですよね。
　賃貸と分かるような室内画像や、信頼感を与えるためスーツ姿の清潔感のある女性を使用するなどが求められます。

【余白が怖い】要素間ぎゅうぎゅう。行間ギュウギュウ。もう～～～！（牛）
→余白にも種類がありそれぞれ役割があります。適した空間づくりが必要です。
　①マクロスペース
　　2つ以上の要素間をとりまく大きなスペース。要素間の重要度の順番が作られる。
　②マイクロスペース
　　文字間や行間などの要素間における小さな余白。情報に目を通す時に息継ぎがしやすくなる。
　③アクティブスペース
　　余白を作り注目を集める。目立たせたいオブジェクトの認知性を高めることができる。
　④パッシブスペース
　　要素間の小さなスペース。可読性をあげるために用いる。

【加工を使いたがる】濃い目のシャドウに太い境界線、そして強烈なグラデーションっっ！！目が痛い！
→WEBデザインにもトレンドがあります。
　「なんか古い＝更新が滞っているのでは？＝正しい情報なのか？」と、不安になったことはありませんか？
　Web2.0、スキューモーフィズム、フラットデザインと歴史があり、
　現在は光沢感や立体感などの視覚効果が少ないフラットデザインが主流です。
　もちろん最新の綺麗なデザインが正解！ということではありませんが、最低限のトレンドは押さえておかなければいけません。

【レイヤーがぐちゃぐちゃ】Let’s宝探し！バナー1つで最下層に長方形、最上層にテキストがあるとかないとか。
→整理整頓は大切です。
　「テキスト1つ探す、画像のロックを外す、要素を全て選んで移動する。」
　そんなひとつひとつの作業が5秒の単純なことでも、その3つを仕上げようと思うと3、4回はレイヤーに触れるはずです。
　5秒×3レイヤー×4回＝1分
　1日に多いと10件以上対応します。
　1分×10件＝10分/日
　10分×20日＝3.3時間/月（びっくり）
　単純計算ですが、レイヤー整理だけでも作業効率は大幅にアップできます。

【俺が著作権】著作権を知らない！それ有料やで。規約があるんやで。信用問題やで。
→画像にも著作権があります。
　検索してヒットした画像を好き勝手使用したり、素敵なサイトをごっそり真似したり、SNSなどのロゴを可変したり、
　「10年以下の懲役、又は1000万円以下の罰金」に値するかもしれません。また、会社としての信用も失います。とても大切なことです。

【集中しすぎて時空がゆがむ】あれー？これー？んー？…ﾊｯ！！！！すみません！間に合いません！「へっ！？」
→報告、連絡、相談。新人だからこそ徹底しましょう。
　報告することで「もしも」の時に備えられます。
　連絡することで「まさか」の時に助けてもらえます。
　相談することで「むりだ」の時に協力が得られます。
　最初のうちは思わぬ事態が起こりがち。自己工数の把握と報連相をしっかり行い守りを固めましょう。

【フィードバック1回限り有効】AのフィードバックはBに引き継がれない！
→メモ魔になれ。信頼の貯金を貯めよう。
　とにかくメモを取りましょう。記憶ではなく記録に頼るのです。
　何度も同じ指摘を受けていると、そのうち「何言ってもダメだ」と信頼を失ってしまいます。
　また、他者へのフィードバックを盗み聞きして、自分の行動に映せられるとストレスなく成長できてオススメです(笑)

新人コーディングあるある

【保存しない】してー！ctrl+sしてー！スライスも財産よ！
→弊社ではUSBの使用やPCの持ち出しなども厳しく管理されています。PSDデータ1つとっても大事な財産。
　データ管理の重要性やチームで制作する場合の注意点は最初のうちに理解するまで質問、確認をしましょう。（2回目）

【全部pタグ】これでもか！！！ってくらいpタグ。それでデザイン通りにできるから逆に凄い！
【リストタグ内にli以外入れがち】リ！ス！ト！なのにpやらdivやら入れたがる。
→タグの意味を理解しましょう。
　HTMLはウェブページ内の各要素の意味や情報構造を定義するもの。
　マークアップによってコンピュータにも文章の内容を理解させることが出来ます。
　ただ見栄えを整えるだけがコーディングではありません。

【brで段落レイアウト】CSSとは！を10回唱えさせなきゃいけませんね。
→装飾の指定をするのがCSS。
　HTMLだけでも見栄えを制御することも可能ですが、本来「意味や情報構造を定義するもの」であって、装飾はCSSで行うべきです。
　色やサイズ、レイアウトはCSSを使用しましょう。

【class命名長考】読み上げるのも恥ずかしいローマ字での命名や、短すぎてもう何のことか分からない命名も…
→ルールを見つける。
　名前と機能の意味が合致しているか、名前のつけ方にばらつきがないか注意しましょう。
　弊社のHTMLはひな形があり、class名や画像名など一定のルールがあります。
　他者が見ても理解でき、統一性のある命名をすることで今後の運用での簡易化につながります。

【!important最強説】魔法の言葉！
→安易に使用してはいない。
　HTMLやCSSは変更、修正されていくものです。
一度使用すると更に上書くための!importantが必要になり、それを繰り返すと最終的にどうにもならなくなります。
　使いたくなったら一度構造を見直しましょう。

【float使いっぱなし】後ろの要素ぐいーんってなっちゃうよー。ぐいーんて。
→浮動化を理解する。
　floatは、フロート（浮動化）を指定するプロパティ。
　浮動化された後の非不動化要素が回り込み、意図しないところでレイアウトの崩れにつながってしまいます。
　必ずfloatは解除してあげましょう。弊社ではclearfixを使用しています。

【フォント指定を忘れる】レイアウト完璧！タグ完璧！でもデザイナーは泣いてます！
→フォントの種類を知る。
　フォントが変わるだけで与える印象にも大きな差が出ます。
　①ゴシック体、サンセリフ
　　縦線と横線の太さが均等で、力強さやモダンなイメージを与える。
　②明朝体、セリフ
　　縦線と横線の太さが異なり、繊細さや上品なイメージを与える。
　ゴシック体の中でもメイリオ、ヒラギノ角ゴシック、游ゴシックなど様々です。
　また、スマホのandroidには明朝体がインストールされていないので指定の際には注意が必要です。

【メタに弱い】書き忘れ。書いてもディスクリプション考えるのに30分。それ、コーディングより時間かかっｔ。
【altタグ空っぽ】altタグ自体がないこともしばしば。書かれていても画像の説明じゃないこともしばしば。
→SEOを学ぶ
　HTMLとCSS（JS、PHP）にプラスして「SEO」の学習を取り入れましょう。
　H1やタイトル、ディスクリプションの与える影響や、正しいマークアップ、ソースコードの軽量化など、
　それぞれ意味を理解することで書き忘れや悩むこともなくなります。

先輩の「当たり前」は経験の積み重ね

40万円では、Photoshopのレイヤー整理方法や自己工数の把握は教えてもらえず。命名規則やメタの重要性までも秘密だったわけですね。

はい。今となっては思い出すだけで恥ずかしくて白目剥いちゃうような事例ばかりですが、
入社当初は善し悪しも分からず「なんとなく」「それっぽく」でひたすら手を動かしていました。
学ぶ手法も調べる範囲も考える視野もとても狭く、先輩にチェックしてもらっては目からウロコ。

誰もが辿ってきた羞恥心いっぱいのこの道。
＿人人人人人人人人人人人人人人人人＿
＞　あなたも歩むこと間違いなし！　＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣

なんせ、学校や本では教えてくれないので会社で実務で学ぶしかないですね。
でもですね。でもですよ。
先輩がどんなに私個人のために時間を割いてアドバイスをしてくれても、経験談を交えて一生懸命話してくれても「ふーん」「へー」としか受け取れないと思うんですよ。
だって私がそうでしたから（失礼）

学生から「必要な資格ありますか？」と聞かれますが、資格よりも上記であげた事例。先輩の言う「当たり前のこと」を素直に身に付けることを最優先に考えてほしいなぁ。と思っています。経験に勝るものはありません。

次回はデザインやコーディングの参考になるサイトや記事を紹介したいと思います。
皆さんが恥ずかしさで溢れませんようにっ！！！

この記事を書いた人

まえはら: 2014年中途入社のWEBデザイナー。社会人経験はいえらぶが初めて。
家でも会社でもマネジメントをする人妻課長。