Goalist Design Blog

レタスデザイナー、メインビジュアル作成してみた ~写真加工編~

どうもこんにちは。ナガタです。 先日、社内メンバー(@東京)の個人撮影をしました。

下手っぴだけど撮影はとても楽しかったです。表情が良さそうな写真をいくつか選定して、メインビジュアルに使用する素材として切り抜いて使わせてもらいます。

し・か・し  実は私、今まであんまりフォトショップ使う機会がなかったので仲良くありません。切り抜きの加工って、普通はどんな感じでされてるんでしょう?何か良い方法は?

 

ググってみた

このへんの技術はググればいくつもお手本になる記事が出るので困らないですね。

ただ、初めて扱うツールやお手本と見比べながらの作業はまあまあキャッチアップの時間が必要です。何パターンか調べて試してみましたが、自分がやりやすかった方法で簡単に紹介したいと思います。

 

今回編集したいのはサーバーサイドエンジニアのSさんの写真。よい笑顔です。

"f:id:e-nagata:20170915120357p:plain

人物切り抜きでやっかいなの要素の一つは髪の毛ですよね。細かいし、今回の場合だとパーマで細かい動きもあるし、どうすれば。

 

まずはペンツール【p】か自動選択ツール【w】でざくざく切り取りたい範囲を囲います。

f:id:e-nagata:20170915132610p:plain

選択範囲を作成します。【command + enter】(mac)

すると点線で囲われる。ちなみに写真のぼかし具合にもよりますが、選択範囲のパスは囲いたい輪郭の1~2px内側にすると綺麗に見えるようです。

そこで右クリックして、「選択とマスク」を選択します。

さきほどざっくり範囲を指定しただけなので、まだガタガタ。この状態では細かい部分はとりのぞかれています。

f:id:e-nagata:20170915134139p:plain

f:id:e-nagata:20170915134524p:plain

 わかりやすいよう、「表示」を白黒モードにしました。

 

 

ダイアログボックスの「エッジの検出」より調整する領域のサイズを調整します。

「スマート半径」オプションにチェックを入れ、サムネイルで右にスライドさせてみます。

f:id:e-nagata:20170915134528p:plain

髪の毛が選択されているのがわかります。

f:id:e-nagata:20170915135034p:plain

さいごに「出力」タイプを選択。今回は「レイヤーマスク」機能で出力することにします。その他にも「新規レイヤー」や「選択範囲」、「新規レイヤー(レイヤーマスクあり)」など使い分けることができます。

 

 

するとっ

おー!それっぽく作業できました!素晴らしい。

f:id:e-nagata:20170915135154p:plain

髪の毛の細かい部分もバッチリです。

f:id:e-nagata:20170915135700p:plain

めーっちゃ初歩だけどフォトショと知り合いくらいになれた気がして嬉しいです。

他の人の写真素材もバコバコ切り抜いていきたいと思います。

メインビジュアルが終わればレタスデザイナーの仕事の6割は終わったようなもんです!あとは粛々とモック画面作りを進めます。

ーーー

今回はいろいろ省略した部分もありますが、こちらの記事で詳細が説明されています。参考にさせていただきました。

Photoshop切り抜きをマスターする、10個の鉄板テクニック 完全ガイド - PhotoshopVIP

レタスデザイナー、メインビジュアル作成してみた ~撮影編~

どうもこんにちは。デザイン部新人のナガタです。

ゴーリスト新卒採用サイトの制作を担当しています。

前回までのおさらい:

先日の投稿では新卒採用サイトの企画からラフスケッチの段階までを記事にしました。
ワイヤーもSketchを用いてぐぬぬぬ〜と作り、いよいよ具体的なメインビジュアル作成に入ります。

 

メインビジュアルを考える

基本的にはメンバーを見せるかたちでトップビジュアルを作りたいと思っていたので、全身いれて構成したり、グリッドで仕切ったりする案を2,3案ほど描きまして。

f:id:e-nagata:20170904184820j:plain

ふ〜む。これってイラストでやる?写真でやる?という選択肢が。

迷っててもあんまりわからないので、社内メンバーの数人を簡単にイラストにして雰囲気を確認してみました。

f:id:e-nagata:20170904185724p:plain


もしイラストの方向でいくなら素材はこんな感じになりそうなんですが…とチームリーダーミツイさんと人事担当のハヤシさんと相談。

「うーん、写真の方が生っぽくて良さそうだよね」との返答が。

確かに、イラストだとどうしても描き手の色が出てメンバーの雰囲気が統一されてしまいます。写真でいきましょう。

方向性、決まる

諸案出しましたが、まあ一番良いんじゃないかなと思う路線でビジュアルの方向性が決定しました。

 ホッとしたのもつかの間、TOP画作成のためにやることがいろいろと。

・メンバーの写真撮影(全身)

・切り抜き加工

この案が通ったのでトップ画の作成としてはマスト事項ですね。あれっ?でもどっちもやったことないよ、誰がやr…

今回はディレクター・デザイナー・コーダー業だけじゃなくカメラマンも担当することになりました。…おっとこれは予想外でした。ウェブサイト制作ってやつはスーパーマルチタスクなのですね。

  

アドバイスもらってみた

ということで、撮りたいモノと聞きたいコトをざっくりまとめて、写真のうまい先輩デザイナーにアドバイスを聞いてみました。

・撮る位置って、どこがいいですか?

 →後で切り抜きするなら白壁の方が◎

・窓際の方が光入りやすくて良いですか?

 →曇りや雨だと明るさが安定しないので、ライト(室内蛍光灯)あるところで良いのでは

・こういう場合何パターンくらい撮っておくものなんですか?

 →最低3パターンくらいはほしい。テキストが入ることを考えると、上下あるいは左右のどこかスペースが空いていると素材として使いやすいよ

・他に何か気をつけることは?

 →モデルになってくれる人が服や髪を整えたりできるような配慮とか、遊びとして小道具があっても良いかも 

ほほ~参考になります。 大学時代に写真の授業は少しとった事がありましたが、そこでは一枚絵の作品として撮る、見ることが前提だったので、テキストと絡むことを考えるというのはナルホド!でした。たしかに写真がおもしろくてもウェブで素材として使いやすいかは別ですよね。

 

モデルを頼んでみた

・まず撮影日の仮決めをして、

・写真撮影で使いたいスペースに(会議などの)先約がないかをチェックして、

・モデルの協力をお願いしたいメンバーに、サイトへの写真掲載OKかどうか?を確認して、

・(OKな場合)当日の服装で気をつけてほしいことや、15分間、時間を頂戴すること

を伝えて、時間帯調整などの具体的なお願いをしました。 相手がいるので連絡がギリギリにならないよう一週間前程にアナウンス。段取り力と巻き込み力が必要です。

皆様快諾くださってありがとうございます!おねしゃーす。

 

実際に撮ってみた

今回モデルになってくれたのはセールスチームの同期、元気なOちゃん。

f:id:e-nagata:20170905113402p:plain

パシャり。とりあえず明るさと位置が大丈夫か確認と調整します。ちょっと暗いな。

 

再確認、パシャり

f:id:e-nagata:20170905113514p:plain

こんなもんですかね…?

 

パシャパシャ

f:id:e-nagata:20170905113613p:plain

 

はい、ニコッとして~。

f:id:e-nagata:20170905113732p:plain

おっ!いいね~その笑顔いただき~!!

 

同じく同期のHくんも撮ってみよう。なんか動きつけてみて〜。

パシャり

f:id:e-nagata:20170905160336p:plain

ごめん。私の指示が悪かった。阿波踊りしてるようにしか見えない。

 

じゃあ今度ちょっとポーズ変えてみようか~!

f:id:e-nagata:20170905113754p:plain

はい、そこイイね~!! パシャパシャパシャ

 

こんな感じに

f:id:e-nagata:20170905113910p:plain

f:id:e-nagata:20170905160722p:plain

 アア、女の子を撮るって楽しいな。

パソコンで拡大したらちょっとピント甘くて泣きたくなったけどまあどうにかなるんじゃないかな?! どうにかします!

モデルになってくれたメンバーの皆さん、素敵な笑顔とご協力くださってほんとにありがとうございました。

次回はフォトショでの切り抜き加工編について書いてみます。続く。

Facebookシェア画像を変更する方法

こんにちは。シミズです。

 

先日限定ふろぐんの話をしましたが

design.goalist.co.jp

 

無事山の日ふろぐんを世に送り出すことができました。

f:id:goalist_432:20170825175034p:plain

 

Facebookでいいねがちょっとだけついてました(о´∀`о)

9月も引き続き何かしらふろぐんにやってもらおうと思います。

 

さて、話は変わりますが、今回はFacebookに投稿した記事の画像を差し替えようとしたらGoogle先生がすぐに解決方法を教えてくれなかったので←

備忘録的に残しておこうと思います。

 

前提条件…

・記事はWordPressで作成

・シェアするためにFacebookに投稿

 

例題

インターン求人まとめの記事、載せている求人媒体の数変えたからタイトルとアイキャッチ変えないと!

 

下記の記事アイキャッチにもタイトルにも求人媒体の数が入っていますね。

でもFacebook投稿後に載せている求人数変わりました。

結構拡散されてるよ…どうしよう。

 

f:id:goalist_432:20170825175957p:plain

 

解答例

①WordPress上でタイトルとアイキャッチを変更して保存

 

②Facebook デバッカーを開き、記事のURLを入れてデバックボタンをクリック!

f:id:goalist_432:20170825180333p:plain

 

③スクレイピングし直す

f:id:goalist_432:20170825180526p:plain

 

するとプレビューの画像が変わります。

1回で変わらない時は変わるまでぽちぽち押します。

 

④画像が変わったらページ下の方にあるOpen Graphオブジェクトデバッカーをクリック

f:id:goalist_432:20170825181029p:plain

 

⑤新しいスクレイピング情報を取得をクリック

f:id:goalist_432:20170825181356p:plain

 

するとプレビューの画像が変わります。

 

f:id:goalist_432:20170825181501p:plain

1回で変わらない時はまた変わるまでぽちぽち押します。

 

⑥投稿を編集→編集画面でシェアした添付ファイルを更新をクリック

f:id:goalist_432:20170825181533p:plain

 

⑦確認画面が出るので、問題ないかチェック&保存

f:id:goalist_432:20170825181657p:plain

 

すると…

 

………

 

はい。変わりました。

 

f:id:goalist_432:20170825181719p:plain

 

なんと既にシェアされている画像もまるっと更新されます。 

素敵。

 

もっと簡単な方法あるよとか色々あれば教えていただけると嬉しいです

|・`ω・)ヨロシクドウゾ

レタスデザイナー、新卒採用サイト制作にとりかかってみた

どうもこんにちは。最近iOSエンジニアのワタベさんからレタスデザイナーの称号をいただきましたナガタです。

f:id:e-nagata:20170707100732j:plain

 

レタスばっかりじゃ芸がない!ので今回は友達からもらった野菜たちも載っけときます。夏を感じますね〜

f:id:e-nagata:20170808184047j:plain 新鮮とれたて無農薬!

 

7月はチームメンバーからちゃっかり誕生日も祝ってもらったりしました。なんとサプライズのケーキ!!!ひゃーい

f:id:e-nagata:20170808184323j:plain

めっちゃ嬉しかったです。めっちゃ美味しかったです。ありがとうございました!

 

 

 新卒採用サイトの担当に

さて、前回のブログでは新卒研修で2018年度の自社新卒採用サイトをつくったことを書かせていただきました。7月に入ってからも、引き続き新卒採用サイト制作を担当しております。

前回は企画から画面のプロトタイプを作るまででしたが、今回は企画、デザイン、コーディング、全てこなします。

立場的に言えばディレクター、デザイナー、プログラマーを一度全部通して経験してみることになりますね。得意苦手があってもとりあえず全てやりきる!というのが個人の大きな目標です。

もちろん自社の新卒採用に大きく関わるので、大本のゴールである「ゴーリストにマッチする方に興味を持ってもらえるようなサイトを作る」ということを忘れずに取り組みます。

 

まず何したの?

まずレタスディレクターは必要項目の洗い出しを行いました。

これが必要かなと考え得る項目を全部書きます。初めてだから漏れや抜けもあるかもしれないけど、まあとりあえずこんなもんですかね。

・工数見積もり

・スケジューリング

・コンセプト設定

・コンテンツ決め

・サイトマップ制作

・ワイヤーフレーム制作

・具体的な画面デザイン

・素材(写真撮影など)集め

・コーディング

・ブラウザチェック

うわっ…ざっくり書いた時点でいっぱいあるなあ。

 

次に

・スケジューリング

7月から始めて9月頭にオープンって、2ヶ月しかないではないですか……なんかヤバい気しかしません ずいぶんタイトな気がしますが頑張ってみます。

全然サイト作りの段取りや一般的な目安がわからなかったのでデザイナーの先輩にいろいろ質問をしました。大まかなフローや進める手順を教えてもらいます。ほほ〜f:id:e-nagata:20170808192059j:plain

あと、入社してチーム共有のタスク管理ツールとしてTrelloを使うようになりました。

書き出したタスクをばんばん登録してガントチャートも作成できる便利な子です。Togglでかかった時間もちゃんと測って、、工数管理も必要なんですなあ。

  

・ウェブサイト制作の目的を決める

「ゴーリストに興味を持ってもらい、説明会に来てもらうこと」

去年の入社人数と応募者の割合から諸々計算しまして、説明会参加者の目標は100人に設定しました。

 

・ターゲットを決める

今回のターゲットは「社風や働いている人たちの雰囲気を重視して就活をしている方」「自分を繕うことをせず、まっすぐなままに働きたい方」に設定しました。

そのような人たちがサイトをみたとき、何を求めているだろう?を念頭に企画を考えていきます。

あくまでもターゲットの視点を想像しながら作るのですが、自分の年や立場が近いぶん混同しがちになります。そのライン引きは難しいですね。

 

・コンセプトを決める

 「ゴーリストの自然体をオープンに見せる」にしました。

会社の中のことをなるだけ知りたい学生さんへ、包み隠さずありのままうちのメンバーの様子が伝わるサイトを作りたいと思います。

 

・コンテンツを決める

 今回は社員同士のトークセッションに重きをおきます。個人紹介ページも作る予定ですが、トークの方が話題や会話の雰囲気が出やすいと思いましたので。

 

・サイトマップを作る

f:id:e-nagata:20170808192107j:plain

サイトの中身が決まれば、それに合わせて必要なページを考えていきます。

ワイヤーフレームもつくってここで導線設計も考えます。ワイヤーフレームの作成にはSketchというツールを使い始めました。初めての出会いと怒涛のキャッチアップです。

 

・ラフをかく

f:id:e-nagata:20170808192049j:plain

メインビジュアルどうすっぺな〜と思いながら3案ほどゴリゴリと描きました。字が汚くて恥ずかしいです

方向性の確認やレビューをするのに具体的なものがあると、相手(今回は代表に相談)にもイメージを掴んでもらいやすいようで、とても役立ちました。

 

なんだかんだ企画部分を

ザラザラっと書いてみましたが上記の各段階で決断を迷ったり戻ったり、確認したり報告したりで、ちゃんと方向性が決まるまで1,2週間かかった気がします。うーむ。もっとスムーズにできるようになりたいな。

次回はラフの後行った工程について書いてみたいと思います。レタスディレクター→レタスデザイナーへバトンタッチです。ではでは!

 

限定ふろぐんはじめました

こんにちは。シミズです。

 

ちょいちょいこちらでもご紹介していますが、
弊社にはふろぐんという名前のカエルのキャラクターがいます。

f:id:goalist_432:20170731205934p:plain

一応…

・カエル

・♂

・ゴーリストの新人広報担当

というざっくりとした設定があるのですが、
実はそこまで固まっていなかったりします。

 

現在はHRogシリーズのLPに登場したり、
LINEスタンプになったりと
じわじわと活動範囲を広げてもらっています。

 

design.goalist.co.jp

design.goalist.co.jp

 

今後も製品の顔として活躍してもらうにあたり、
もう少し知名度が上がったり人気が出たりすればいいなぁと思い、少し前から
勝手に1日限定ふろぐん
なるものを始めてみました。

 

ざっくり振り返るとこんな感じで
HRogFacebookTwitter(@HRognet)の
アイコンを1日だけ変えています。

f:id:goalist_432:20170731210639p:plain
バレンタインデー
f:id:goalist_432:20170731211335p:plain
ひな祭り
f:id:goalist_432:20170731211515p:plain
ホワイトデー
f:id:goalist_432:20170731212248p:plain
母の日
f:id:goalist_432:20170731212324p:plain
七夕
f:id:goalist_432:20170731212411p:plain
海の日

表情も顔の向きもほぼ一緒なのに七夕からガラッと雰囲気が変わっていますが、
ちょっと 飽きてしまったので バリエーションを増やしたいなと思いポーズを変えたり背景をつけてみました。

 

意外とこれが面白かったので、しばらく色々試してみようと思っているのですが、
ふろぐんの設定をもう一度言うと…

・カエル

・♂

・ゴーリストの新人広報担当

 

 

・ゴーリストの新人広報担当

 

……

 

f:id:goalist_432:20170731212411p:plain

ゴーリストの新人広報担当

 

…。

 

(゚ロ゚; 三 ;゚ロ゚)

セッテイ ナニ ソレ オイシイノ ?

 

いや海の日は休日だったし、
休みの日ぐらい好きな格好をして
過ごしたっていいじゃないか(`・ω・´)

 

ということで、
懲りずに新しくできた山の日(予定)をどうするか悪巧み 検討中なので、どうなったかは是非
HRogFacebookTwitter(@HRognet)を
覗いてみていただければと思います<(*_ _)>

│д゜)祝日の場合は前営業日から翌営業日にかけてとちょっと長く出していますよ

デザイン批評をはじめてみた

f:id:k-mitsui:20170725084338j:plain

 

こんにちはミツイです。

いつのまにかセミが鳴き始めていますね。

もう夏です。すでに夏バテです。頑張ります。

 

デザインの歴史シリーズ書いてましたが、今回は趣向を変えて、チームでのデザインの進め方についてです。

 

ゴーリストでは、最近デザイナーが2人増えて、デザインチームが4人になりました。

せっかくなので、個々でデザイン進めるのではなく、チーム力を活かしつつデザインしていこうかと。

「みんなではじめるデザイン批評―目的達成のためのコラボレーション&コミュニケーション改善ガイド」という本がとても良かったので、これを参考にしつつチームでのデザイン進めています。

 

Amazon.co.jp: みんなではじめるデザイン批評―目的達成のためのコラボレーション&コミュニケーション改善ガイド eBook: アーロン・イリザリー(Aaron Irizarry);アダム・コナー(Adam Connor), 安藤 貴子: Kindleストア

 

一番ナルホドと思ったところについて、ざっくり説明してみます。(個人的な解釈入ってるので、ぜひ実際に本を読んでもらうことをオススメします。)

 

批評で進めるデザイン

デザイン制作を進める際に、個人で最後まで作ってレビューするのではなく、こまめに批評しながらイテレーション(反復して改善)していきます。

批評という言葉が日本語的にニュアンス伝わりにくいかと思いますが、

1.チームやステークホルダーにデザインを見せて、気になる点を洗い出してもらう

2.それを元にデザイナーが改善していく

というのを繰り返します。

批評してもらうタイミングは、定例でもデザインに迷った時でも良いですが、基本、わりとこまめにやります。

 

批評をする時のコツ

1.あくまで人ではなく、制作物に対しての批評である

あくまでデザインを良くするための批評です。

デザイナーを鍛えるためと思って「色についてもっと勉強しなきゃいけないよ」とか、個人に対しての批評はしません。こういうの言われると、萎縮します。

批評が嫌になってしまったら負けです。

 

2.批評のための基準を持つ

デザインをする際に大事なのが

目的:デザインを見る人(使う人)がしたいこと、満たしたい欲求

ペルソナ:どんな人が見る(使う)のか

シナリオ:どんな時に(前後の時間含めて)、どうやって見る(使う)のか

の3つ。

目的に関しては作る側の目的を思いがちですが、デザイナーはあくまで利用者側に立ちます。

批評する時は、上記3つにあっているかどうかが基準になります。

「男子中学生(ペルソナ)が通学中の電車で(どんな時に)漫画を読む(したいこと)ためには、トップページから漫画を読むまでの画面遷移が多すぎるんじゃない?」とか。

上記3つはデザインをする時の基準になるので、批評する全員がそれを理解していることが重要。必要な場合は、mtg前に改めて共有したりします。

 

3.して貰った批評に対して、すぐに応えるのではなく、まず聞く

これ、意外とできていないです。

「このサービスの利用者はじっくり見る時間はないんじゃないかな。今のデザインだと申し込みボタンを見つけにくくない?」

とか批評されて

「いや、そこは既に考えていて、色でアクセントつけてるんですよ」

とか即答しちゃったりしがち。

いきなり応えずに、してもらった批評に対して5秒(くらい?)考えてみて、その意味を咀嚼するのが大事です。

さらに「それはつまり、操作できる部分が多すぎて何をしていいか迷いそう、ってことです?」みたいに能動的な質問をしていきます。

相手の言ってることを理解していくには、「そうですか?」みたいに意味のない質問をするんじゃなくて、自分の言葉で言い換えて聞く。まったく理解できていなければ「すいません。もうちょっと詳しく聞いていいですか?」など、開いた質問(はい・いいえで答えられない)をする。

 

4.批評時に改善案を考えない

これもやれていないことが多いです。

上述の例だと「ボタンを見つけにくくない?」に対して、「もっとボタンを大きくしたほうがいいんじゃない?」とか「いや、色を変えた方がいいか」とか考え出してしまうと、そこで批評の時間が止まってしまいます。

さらに、次の批評(ボタンの問題以外の話題)に移った時に批評メンバーの誰かが「ボタンの配置が…」とか考えてしまうと、次の批評についてはその人が参加しない状態になります。せっかく集まっている意味がないですね。

批評は、改善が必要な点の洗い出しに終始させます。

改善案を皆で考えるとしたら、批評とは別に時間を設けます。

 

まとめ

批評でデザインを進めることで、

・複数人の視点が入ることで、より多角的に改善が必要な点を洗い出せる

・批評にとどめることで改善案をデザイナーが考えることになり、最大公約数的なデザインになるのを防げる

・前回批評時に対する改善案を見ることで、参加した全員がナレッジを貯めていくことができる

等のメリットがあります。

中でも、チームでのナレッジの共有は一番大事かもですね。

知識としてのベストプラクティス(最も効率のよい技法、手法)が増えるし、デザインすることで得られるコツのようなものを全員で共有できます。

 

あと、デザイン以外にもこの批評のやり方は有効だと思います。

チームで作業するいろんな場面で批評を使ってみて欲しいです。

 

とはいえ、“お昼なに食べる?”みたいな時に批評を始めると、非常に面倒くさい人になるのでご注意くださいw

新卒二期、ブログを書く(デザインチーム編)

こんにちは、6月からデザイン部に配属されました新卒2期生ナガタです。

3ヶ月の新人研修も終わり、早速ブログ記事を書く事がOKRの中に組み込まれました。およっ…! 

 

一瞬の動揺。こんなピヨピヨ状態で書けることあるんですか…全然出せるもの無いんですけど…。

兎にも角にも何かしらのアウトプットを、という信念をまず持つ事にします。手を動かすが善。それこそ正義。立ち止まらないことが大事です。

今後のマルチタスクや差し込み案件への肩ならしも兼ねてボコボコ倒していきたいと思います。はい。

 

自己紹介

ブログ投稿初回ということもあり、ゆるりと私自身の自己紹介も兼ねようと思います。

大学では芸術学部に所属して現代美術の分野をちょこっとかじってました。

他には休学中にレタス農家で3ヶ月働いてお金貯めたりとか、ニュージーランドで半年ぶらぶらしていたりとか。

 

f:id:e-nagata:20170707100742j:plainf:id:e-nagata:20170707100732j:plain

いちめんのれたす、いちめんのれたす、見渡す限りのいちめんのれたす

アルバイト期間中にレタスの切り口を美しく切ることができるようになったりとか。あと、レタスって若さによって緑色が全然違うんですけど、そういう違いが身体でわかるようになったのが最高に楽しかったです。何かしら自分の技術があがっていくのを実感することが好きです。若き日の良き思い出です。はい。

 

基本的に自分も周りも好き勝手生きてる人達の中にしばらく浸っていたので、就職なんて大丈夫なのかと思ってましたが案外大丈夫でした。よかった。

仕事には全然関係ありませんがオフィスで魚肉ソーセージをよく食べます。デスク周辺の方にギョっとされますが(魚肉だけに)あんまり気にしません。自由度高めです。さすがに一ヶ月くらいは遠慮して一口チョコをつまんでいました。でも最近は皆さんの優しさに甘えて食べたい物を食べています。(なんて寛容な会社だ)

就職しても奔放に生きております。

 

 

研修を終え

さて、晴れてデザイン部へと配属されたものの、ウェブデザインって何だ!UIUXって何だ!という右も左もわからないピヨピヨ状態が実情です。技術的な知識やネタなど一つも無い状態でブログなど最初から手駒がありません。困ります。

 

 

 

困りました…

 

 

 

ので、

とりあえず先月までをざっと振り返り、新人研修課題と現在取り組んでいることを中心に書いてみようと思います。新人研修が受けられるのも新卒の大特権ですよね。

 

 

~先月(2017.6)まで~

4,5月は新卒全員共通のプログラミングの基礎的な研修が行われ、6月からは配属が決まり部署別研修が実施されました。

デザイン部では「2018年(自社)新卒採用ページを制作せよ!」が最終課題として課されました。3週間でリサーチ・サイトの企画・画面のデザインまでこなします。(さすがにコーディングまでは手が届かずモックアップでのデモでプレゼンしました)

 

まあなんとかなるっしょ~と思ってたら全然そんなことなかった。まず調べる、調べる、わからないことはぐぐる。まずウェブサイト制作の段取りを把握するために諸々のサイトを参考にしました。

サイト制作の段取りはざっくりですが大きく以下に分けることができそうです。

1.目的や対象、方針の設定 

2.計画

3.制作 

 

どの工程もわからないこと多しだったんですが、今回は「なぜつくる、誰に何を届ける」を考えることが自分に一番必要なポイントだったのかなと思いました。

ターゲットがどういう人で何を知りたいのかとか、知りたい情報をどういうコンテンツとしてまとめるのかとか、想定ターゲットが欲しいであろう情報についても考えるんですが、他人の気持ちになるってほんと難しいと思いました。情報収集とか絞り込みも全然まだまだ甘かった。

 

プレゼンの質疑応答で

「(出したモックで)ターゲットに刺さる部分ってどこだと思う?」

という質問に逆にぐさぐさ刺されました。ぐっ。

要は特に誰が欲しいものでもない当たり障り無いものを作ってしまったのですね、琴線に触れるポイントが無いというか。無難だけどメインおかずの無い幕の内弁当というか。

何に特化させるのか?コンテンツを削いで削いで削ぎまくった後に残るものって何なのか?そういう絞り込みが大事なんだってことが特に勉強になりました。特化すると同時にいろんなものを切り捨てる勇気。

 

世の中のコンテンツってすごいんだなあ。(しみじみ)

 

 

 

しみじみしていたのもつかの間

6月末に一旦落ち着いた研修課題ですが、引き続き、今月と来月の2ヶ月で本腰入れて新卒採用サイトを制作することが決定しました。ちょうど昨日スケジューリングを終え、初っ端から工数足りない予感しかしませんが切り捨てる勇気を持ってバサバサなぎ倒していきたいと思います。

戦いは始まったばかりです。

 

次回のブログでは課題で制作した点から何をチェンジしていったのか?を書いていければと思います。技術よりは考え方や段取りの変化がメインになるのかな。

 

来月へ続く。乞うご期待!