Goalist Design Blog

サービス紹介の資料を作ってみた A4フライヤー編その1

こんにちは、デザイン部のナガタです。
秋もだいぶ深まってきましたね。食欲がとまらない今日この頃です。

さて、今回は最近依頼されたサービス紹介の資料について書こうと思います。
いや前も資料の記事だったじゃん、デザイン部の新人は資料ばっかり作ってんるかいな、と思われてしまいそうですが(苦)、
そんなことはないんですよ…、自社HPのリニューアルの作業とか、既存サービスのアップデートに伴うUIとか、諸々やらせてもらってはいるんですけど、、
資料ってビフォーアフターが画像でのせられるのでブログに書きやすいんですよね~。
ネタが被っても気にせずドンドコ書きます!前半・後半に分けて投稿します。



ざっくりないきさつ(いつものやつ)

今回も依頼をくれたのはソリューション事業部長のHさんです。
「ねえねえお願いがあるんだけど、今度新規サービスのチラシを配る予定なんだけど、コレどうにか整えてくんないかな~?!」
「えええ~、私、他の〆切が来週いっぱいでそんなに時間ないでs」
「大丈夫大丈夫、できる限りでお願いっ!(^o^)b」
「いやできる限りっていうのが一番困りm」
「(^o^)b」
「Oh (^o^)b」
このやりとりが最近すっかり板についてしまいました…慣れは怖いです。



ということで、1人日1本勝負で資料をお化粧することになりました。 先にビフォーアフターをお見せしますと、
こんな感じでもらったラフを、

 

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


こんな感じにしました。

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

 

レイアウトについて、ちょうどエンジニアのワタベさんが「何か直したいんだけど、それがどこなのかわかんないのが問題なんだよな~」とぼやいていたので、
どの部分を整えようと思って手をつけるか、の観点で書いてみようと思います。(デザインの基礎書いた本に全部目を通すのってめんどくさいですよね)
アイコンも既存サービスのものを使っていますし、画像が作成できる何かしらのツールがあれば誰でもできる内容です。
ちなみに私の資料作り系のブログは具体例に沿って進むので、汎用的・体系的なデザインの一般基礎知識を知りたい方は他のウェブサイトや書籍を漁ってください…。あんまり親切じゃないです。ゴメンナサイ(_ _)

 

 

1人日1本勝負で

ラフをもらう~最終的に整えるまでに考える事をリストアップしてみました。ざっくりあげるとこんな行程です。

・媒体・サイズと掲載情報チェック
・情報のグルーピング
・情報の重要度決め
・グルーピングと重要度に沿ったメリハリ
・色面を作ってメリハリ
・ちょこちょこ調整

このうち前半3つは全然画面をいじりません。レイアウトに苦手意識のある方もご安心くださいませ!

 

媒体・サイズと掲載情報確認

媒体とサイズは目的によって条件が決まります。
今回は訪問先で渡すためのフライヤーなので、紙のサイズがA4、カラー印刷ということになりました。

次に掲載情報のチェックをします。
掲載に必要な要素が出そろってから始めるのがベストではありますが、原稿が作成途中で揃っていなければ、ダミーで文章を置くのでも良いと思います。でも、あまりに適当すぎるとレイアウトに必要な面積が変わることもあるので、目安になる文章量は把握していた方が良いです。手戻り作業が少なくなります。

さて、もらったラフを具体的に見ていきます。

 

どれどれっ

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


ここまでレイアウトして渡してくれるのも親切で珍しいとは思うのですが(テキストデータだけポーンと投げられる場合がほとんど)、作業側としてはすごく助かるポイントです。
というのも、既に情報のグルーピングがされていて、お客様に伝えたい順番が示されているからです。
個人的には「情報のグルーピング」とその「重要度・優先度の決定」で、レイアウトの作業は7割終わるようなもんだと思います。

 

なぜかと言うと、

情報を束ねると情報のブロック(カタマリ)がある程度できて、画面で配置しやすい位置が決まってくる
重要度をつけると重要度が高い、この情報を目立たせる、などの基準で配置の順序や文字の大きさ・色の強弱を決められる

からです。

7割は盛り過ぎですかね?でも相手にストン!と情報が伝達されるって、画面の細部うんぬんよりもそういう構成がしっかりされていることだと思うのです。
もしテキストデータからの状態からフライヤー作りがスタートするなら、まずこのラフくらいの状態に組みあげるのを目指します。

 

 

情報のグルーピング

今回の場合だと、もらったラフの時点で
・新規サービスがリリースされること
・サービスの内容とステップ
・サービスの特徴
・開発実績
に情報が分類されていました。


ここに

・リリースの日付
・問い合わせ情報を
追加しておきました。
(このフライヤーを見た人が「もっとサービスについて知りたい、連絡したい」と思った瞬間に連絡先が載っていないと、検索する手間をかけることになってしまうからです。)

 

 元のラフ

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

 

日付と連絡先の追加

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


 

情報の重要度決め

グルーピングが終わった状態から、伝わるべき情報の重要度をつけていきます。
まだデザインっぽく見える作業には入りませんが、この行程が「何か直したいんだけど、それがどこなんだろ」に繋がる解決ポイントの一つになると思います。
現時点では情報のカタマリを作ることができました。

しかし、どれが一番大切な情報なのかぱっと見では判断しにくいです。おそらく文字がほとんど同じ大きさ・太さで組まれているためです。

ついでに言うと全体的に画面がパツパツで窮屈な感じもします。

「何がお客様に伝わればいいか?」を基準にして、重要度の高そうな順に並べてみました。整理整頓です~

 

1. 新規サービスの名前(同列一位) 
1. 新規サービスがリリースされること(同列一位) 
3. いつから使えるものなのか
4. このサービスが何なのか
5. このサービスを使うと良い理由
6. 信頼できるかどうか
7. フライヤーより詳しい情報を得るための連絡先

 

 

グルーピングと重要度に沿ったメリハリ

で、これを今回の具体的な文面にあてはめてみましょう。それと同時に文字サイズもざっくり「大・中・小」と定めていきます。いよいよ画面をいじくる過程になりました。

 

 グルーピングが完了したもの(今回はラフの時点で完了されていました)

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

 

重要度に沿って文字にメリハリをつけていく(ロゴももらったので追加) 

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

具体的にいきましょう。

1. 「HRogソリューション」     
  めっちゃ重要なので →画面で一番サービス名を大きくする


1. 「HRogソリューション」の一言説明と、「HRogソリューション」がリリースされること
  重要なので →一番大きくしたロゴとグルーピング、文字サイズ大きめ、最上部に配置する


3. 「2017/11/8」(リリース日)
  重要なので →ロゴと近い位置に置く。日付を一瞬で見つけられるように文字サイズ大きくする

 

4. サービス内容とステップ紹介
  - 「HR業界の〜トータルにサポート」 →タイトルがこの情報ブロックの内容を一言で表しているので、文字の大きさを詳細よりも大きくする。(大・中・小で言えば中)
  - 詳細 →重要度・優先度は低いので小さめの文字で
  - アイコン →この紙面でのアイコンはあくまでも内容の補助なのでサイズは小~中程度

 

5. サービスの特徴
 -「トータルサポートサービスの特徴」 →タイトルがこの情報ブロックの内容を一言で表しているので、文字の大きさを詳細よりも大きくする。(大・中・小で言えば中)
  - 詳細 →重要度・優先度は低いので小さめの文字で
  - アイコン →この紙面でのアイコンはあくまでも内容の補助なのでサイズは小~中程度

 

6. 開発実績
 -「特徴」 →タイトルがこの情報ブロックの内容を一言で表しているので、文字の大きさを詳細よりも大きくする。(大・中・小で言えば中)
  - 詳細 →重要度・優先度は低いので小さめの文字で
  - ロゴ →これまでの取引先の会社が判別できる事、パッとイメージできることが目的なのでそこまで大きくはしない。サイズは小~中程度。もしもスペースの関係でロゴマークをかなり小さくして使用する場合は、使用規定に反していないか確認が必要かもしれません。(お客様先の情報になるのでブログでは掲載を控えます。)

 

7. お問い合わせ先
このフライヤーに目を通した上でもっとよく知りたい!と興味を持っていただいた方のみに向けた情報になるので、一番下に小さくまとめる。

 

 

情報整理の段階でできること


ここまでの情報整理とそれに伴う文字情報の強弱だけで、ある程度のメリハリをつけることができました。

「重要か・そうでないか」のざっくりとした軸があるだけで、手をつけるところが見えやすくなってきませんか?
詳細などの文字を小さくしたことで画面に余裕もできました。すると余白も増やすことができ、ラフの時点よりも幾分スッキリした印象に。窮屈感の改善にもなりました。

スッキリしたついでに要素を中央揃えか左揃えか、どちらかに統一してみましょう。
全体の中心が揃ったのでさらに整理整頓ができました。

 

 その2に続きます!

 

一括処理のUIをまとめてみた

f:id:goalist:20130407103801j:plain

こんにちは、ミツイです。
寒いですね。もう極暖ヒートテック&コートです。
真冬に何を着ればいいのか不安です。。

 

最近、一括処理のUIで迷うことがありました。
一括処理とは、複数のアイテムに対し一括してあるアクションを行う操作。

Gmailのメール一括削除とかああいうやつです。(英語だとBulk actionですね)
ぱっと思いつくのがGmailだったので参考にしようと思ったのですが、どうにもイマイチ。
もっと良いのがあるのではないかと思い、色々なサービスを探したので記事にまとめておこうと思った次第です。


ではさっそくGmailから。

Gmail

f:id:goalist:20171031203933p:plain

www.google.com

各アイテム(各メール)の左にチェックボックスがあり、選択したアイテムに対して上部の操作バーにあるアクションを実行します。
操作バーにあるチェックボックスで、表示中の全てのアイテムに対して選択・選択解除を行うこともできます。
しっかし、選択したアイテムに対して取れるアクションが非常に多い。
ラベルと移動の関係がわかりにくいとか、同じ操作ができるアクションボタンが二つあるとか、そういうのはInboxへの移行のせいですかね。
もっと良いのがないか探してみます。 

Inbox

f:id:goalist:20171101104856p:plain

初期状態

f:id:goalist:20171101104914p:plain

1つでもチェックするとこうなります。

www.google.com


Inboxでは、チェックボックスが初期状態では隠れています。
アイテム左のアイコンをホバーするとチェックボックスになり、一つでもチェックすると全てのアイコンがチェックボックスに変わります。

また、チェックすると上部にある操作バーが、検索等の通常状態から一括処理要のアクションボタンに変わります。
マテリアルデザインガイドラインにあるとおりの仕様ですね。
このチェックした時にだけ表示が切り替わるの好きです。

初期状態の画面がシンプルになる、動的に変わるのでアクションボタンへ目が行きやすい、のが良し。


wordpress

f:id:goalist:20171031204541p:plain

ja.wordpress.org

S3

f:id:goalist:20171031204638p:plain

aws.amazon.com

はてなブログ

f:id:goalist:20171031204757p:plain

hatenablog.com


wordpressの管理画面、S3、はてなブログ、一番一般的と思われるチェックボックスとプルダウンのタイプ。
S3の様にアクションの種類が多い場合は一番しっくりきます。

Google Photos

f:id:goalist:20171031204846p:plain

photos.google.com

Google Keep

f:id:goalist:20171031204952p:plain

https://www.google.com/keep/


Google Photos、Google Keepはデータグリッドなので各アイテムの左上にチェックボックスがあります。
チェックするとアクションボタンが出てくるのは、Inboxと同じくマテリアルデザインです。 

Google Drive、Mega、OneDrive

f:id:goalist:20171031205112p:plain

drive.google.com

f:id:goalist:20171031205208p:plain

mega.nz

f:id:goalist:20171031205419p:plain

onedrive.live.com


Google Drive、Mega、OneDriveは、チェックボックスはなくキーボードとマウスの操作で複数選択できます。
仕様書くと細かいので省きますが、ファインダー(Mac)、エクスプローラー(windows)でできるような操作です。
チェックボックスがないので、シンプルになる上、一部分を複数選択する場合やりやすいです。
あと、この3つは選択した上で右クリックメニュー内にアクションのリストがあります。
マウスの移動が少なくて済むので素早く作業できますね。
デメリットとして操作できることが気づかれにくいというのがありますが、何回も使われるサービスなだけに学習してくれるだろうという目論見でしょうか。

 

Dropbox

f:id:goalist:20171031205522p:plain

www.dropbox.com

Dropboxはチェックボックスタイプ。
アイテムをホバーするとチェックボックスが表示されます。
チェックすると、右側サイドバーに一括操作のアクションボタンが出ます。
アクションの数が多いのでヘッダー横並びにするのは厳しい→常に表示させたいのでプルダウンにしたくない→サイドバーに入れている、って感じでしょうか。
他のストレージサービスに比べて複数選択が面倒くさい気もします。

Pocket

f:id:goalist:20171031205620p:plain

getpocket.com


PocketではShiftを押しながら選択すると、複数選択モードに入ります。
最初知りませんでした。ていうか、気付かないですよね、これ。

最初の頃ツールチップで教えてくれてた気もしますが、それにしても。。

 

Googleスプレッドシート

f:id:goalist:20171031205751p:plain

 

www.google.com


意外と思い至らなかったのがExcelやGoogle spreadsheetの一括操作。
選択してある状態のセルに対して各種の操作を行えます。
アクションの種類は非常に多いです。

特に一括用のアクションボタンはなく、通常のアクションボタンをそのまま一括として使うことができます。
また、チェックボックスはなく、クリックでセル選択、上部・左側のヘッダー部分をクリックすることで列・行を一括で選択、ドラッグによる複数選択、Shiftやcmdキーを使った選択など、選択方法も豊富です。

一括処理としては最強ですね。

 

結論

結論として、今回作ったUIではスプレッドシートを参考にして、ヘッダー部分をクリックで一括選択する形にしました。

社外秘の製作中UIなためキャプチャ等は載せられないです。。すいません。


色々見て思ったのは、UIを決める際に重要視しているのが想定される使用頻度である(んじゃないか)ということ。

アクションボタンをコンテキストメニューに入れるのは初見のユーザーにとっては気づかない恐れもありますが、慣れたユーザーにとっては非常に便利です。


あと、スプレッドシート(とExcelも)は作業を効率的に行うためのUIとしての作り込まれようには恐れ入ります。今更ですが。。

 

以上、まとまりのない記事ですが、一括選択・一括処理のUIに困っている方がいたら参考にして頂ければ幸いです。
好評だったら、第二弾として他のUI部品でもやるかもしれません。
ではまた。

HRogのステッカーを作ってみた

こんにちは!デザインチームのナガタです。(漢気をみせてブログ3連続投稿です!そろそろターキー賞もらえるのではないでしょうか?!)

さて、先月ちょろっと入った差し込み業務について今回は紹介したいと思います〜。

「ねえ、ふろぐんでパソコンに貼るステッカー作ったらどんなんなるかな?」
「ス、ステッカーですか…?つ、作ってみます…!」


とりあえず王道パターンを出してみた

デザインチームで雑談ベース会議をしました。 ステッカーってサンプル集めるのも楽しいですね〜。

とりあえず最初なので超オーソドックスパターンにしてみましょう、ってことで。

・自社ロゴ
・HRogのロゴ
・ふろぐんオンリー
の3パターン作ってみる? はいっ、そうしましょう!


いろんなオリジナルグッズが作れるsuzuri.jp!

ふろぐんや自社ロゴのデータを用意したら、 suzuri.jpさんのサイトでデータ入稿してサンプルを作ってみます。
こちらのサイトではステッカーだけでなくマグカップの印刷やTシャツ、トレーナー、スマホケースなど、ありとあらゆるオリジナルグッズが作れます。
しかも!それぞれのデータがプリントされたサンプルの写真も一気にブラウザでチェックできる。おお。
さらに!これ、suzuri.jpのサイト上で公開すると、値段(原価+取り分)を設定して販売できるのです。すごいですよね!便利な世の中だ〜。




ジャジャジャーン

はいっ、できあがったのがこちらです!  f:id:e-nagata:20171013092826j:plain

ふろぐんがステッカーになるとこんな感じ!がわかったので試作の目的達成です!
やっぱり実際に手にすると作るものが絞り込みやすいですねー。 試作結果、「HRogロゴ+ふろぐん」バージョンを本番用に印刷することになりました。ふろぐんに自社サービス普及活動してもらいます。 今度は本番用にリサイズしたものを発注しまーす。

資料にこっそりワンポイント加えてみる

10月になり、いよいよ秋の気配が濃厚になってきました。どうも、ナガタです。秋晴れはとても爽やかで美しいです。

はてさて、新卒採用サイト記、ダラダラっと書いてるうちに完結してしまいました。

これからは業務で触れたことをちょこちょこ書き留めていく予定です。とりとめも無いこと、技術的なこと、お茶でもすすりながらゆるりと書いていこうと思います。(※お仕事サボってるわけではないです)
先日、ちょうどソリューション事業部で使う資料について声をかけてもらう機会がありました。今回はそちらのトピックを書くことにします。



「う〜ん、資料、どうにかならないかしら」

今回の発端はこちらの一言でした。 相談をもらったのはソリューション事業部長のHさん。

「今、資料作ってるんだけど、なんか僕でもできるような超簡単な工夫って無いかな? すっごい簡単にできるやつ。」

すっごい簡単にできるやつ。
それは、つまるところ
・イラストは描かないでいいし、
・色選びも凝らないで良いし、
・今作ってるたたき台にちょっと加えるだけでなんかそれっぽく見えるように

できないかな、とのことでした。なんかそれっぽく。

「いや〜こういう悩みって、企画書作成する人だと絶対あると思うんだよね!これ、ブログにしたらおいしくない?! ちょっと間違ったらバズんないかな?!笑」

といつもの調子でお話してくれました。 バズ…るまではいかないと思いますけど、とりあえずブログのネタにはなりそうなのでなんかしてみます!


ちなみに、Hさんの現状点

・きれいなフォントを使っていたし、
・フォントの種類も統一されている。
・情報もグルーピングされている。
・テキストもちゃんと揃えてある。
・基本的なフォーマットは統一してある。
・無駄な色も使っていない。

大きな問題は全然なさそうでした。というか、すごく綺麗でした! はてさて、そこから何をしていきましょうかね〜。


なんかそれっぽく。

体系的に書けるものでもなさそうだから実際の画面を並べて、やってみたことを書いてみようと思います。もちろんこれが正解ではないですし、スライドのちゃんとした作り方調べたら素晴らしいリソースがたくさんあるんですけど、
かなーり簡単なやつで
その場ですぐできそうなこと
の条件から考えてみました。なるべく、なるべくいじらずにできること。


ビフォーアフター

f:id:e-nagata:20171003102257p:plain
Before

f:id:e-nagata:20171003102853p:plain
After
・ロゴとの余白をある程度つくる

f:id:e-nagata:20171003102406p:plain
Before

f:id:e-nagata:20171003102424p:plain
After
・ページ上の余白がみちみちだったのをゆとりをもたせてみた
・「目次」等、ある方が良いけど優先度の低い情報はサイズを小さく&色を薄くしてみる

f:id:e-nagata:20171003102440p:plain
Before

f:id:e-nagata:20171003102452p:plain
After
・長い一行は読みづらいので適度に改行
・文字が散らばってる感があったのでラインを加えてみた(これは好みによる気がする)

f:id:e-nagata:20171003102515p:plain
Before

f:id:e-nagata:20171003102528p:plain
After
・文章量が多ければ左に揃えてみる
・線で囲むより面を作ったほうがなんとなーく識別しやすい(色はメインカラーの赤を薄くしているだけ)。

f:id:e-nagata:20171003102548p:plain
Before

f:id:e-nagata:20171003102601p:plain
After
・説明文のブロックの間が、両端の余白より幅が広いのでつめる


f:id:e-nagata:20171003102619p:plain
Before

f:id:e-nagata:20171003102638p:plain
After
・"企画・設計から〜"の文面が行間みっちみちだったので広げる。


f:id:e-nagata:20171003102704p:plain
Before

f:id:e-nagata:20171003102719p:plain
After
・開発フローの上段と、下段の説明を線で囲うと、それぞれのステップが分かれてしまう印象だったので、
・フローの上段を色面にして、下段の説明をその中にすっぽり納めるようにしてみた


3分クッキング、終了

ちょっとは見やすくなりましたかね?!どうでしょう〜。 まあ、この中の1つくらいは何かに使えるんじゃないでしょうか。もしプレゼンのスライドや資料作りに問題を抱えていましたら何かお役に立てたら幸いです!わははは!

レタスデザイナー、コーディングをする

こんにちは、今月は出没度高めのナガタです。

新卒採用サイト制作シリーズ、ディレクター・デザイン業を経ていよいよ最終章へと向かいたいと思います。

前回までをおさらいしますと、メンバーの写真撮影を行い、写真の切り抜きを終え、どうにかこうにかトップのビジュアルイメージ作りを行ったのでした。

 

そららを組み合わせたのが、ちらっと、こんな感じです。 f:id:e-nagata:20170925115210p:plain

 

全てのページの画像モックをつくる

トップページを作った後はSketchと格闘しつつ、そして当初のスケジュールからも結構な遅れをとりつつ、泣きながら各ページのモック画面をつくりました。地味にショートカットをググりまくっています。慣れぬ…illustratorと激しく混同しております。

実際の画面にテキストをはめてみた時の文字量調整もすごく大事ですね〜。 PC版とモバイル版、両方つくってスクロールの長さや読みやすさも確認します。

ちらっと、こんな感じです。

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

 

Hello! Bootstrap

コーディングを始めるにあたり、今回Bootstrapを利用することになりました。

「Bootstrapってまず何?」状態からのスタート。何やらTwitter社が開発したCSSのフレームワークで、そちらで用意されている枠組みや要素を使うと簡単にサイトが組めるらしい。レスポンシブデザインもお任せあれ、と。ほほ〜。

とりあえず、簡単に作ったhtmlファイルの<head>~</head>部分にこのリンクを貼り付けます。(Bootstrapの詳しいスタート方法は他にたくさん親切なサイトさんがあるので割愛)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

そのあとJavaScriptやjQuery等のプラグインも貼り付けて、同じように読み込めばいいんですね。 CDN…何それなんかすごい…初めて知る概念…私本当にIT会社に来たんだなあ(しみじみ)と思いました。

初心者がBootstrapを扱ってみた所感ですが、 基本のグリッドの概念やパーツは用意されてるとはいえ、その仕様は1日直に組んでみて始めてくせがわかった、という感じでした。ネット記事を見た限りもっと簡単なものだと構えていたもので…。

あと、公式ページだと英語に目を通すだけで諦めてしまいそうなので、私は日本語に翻訳されているページにだいぶお世話になりました。説明はバージョン3のものになってしまいますが、基本概念を抑える程度であれば大丈夫かと思います。(※2017年9月現在Bootstrapはv4がリリースされてます)

 

Hello! Sass

htmlを書いたらもりもりcssを組んでいきます。 ここでSassなるものを導入。 cssを入れ子構造にしたり、ネストで書いたり、テーマカラーを指定して数値で変化させたり、かなり便利な書き方ができます。すごい。 例えばアクセントカラーをこの色に指定して、

$accentcolor: #F79E00;

指定箇所で"$accentcolor"の表記で使うとか。

.btn-entry {
  border: 1.5px solid $accentcolor;
  // background: $accentcolor;
  &:hover {
    border-color: $accentcolor;
    background: $accentcolor;
  }
}

あとから色を変えたくなったら最初の大元、一箇所だけ記述を変えれば良いんですね!すごい便利だ!

cssを読み込んで画面が組み上がっていく!テンションが上がる!うほほ f:id:e-nagata:20170925140732p:plain

 

モバイル版を整える

忘れていました。デスクトップの大きさで組むのとモバイルだと全然ちがうんですね。 例えばトップイメージのサイズとか。 PC版と、モバイル版で最適サイズを調整する必要があるのですね〜〜。先輩が書いてくれたコードを見て、見よう見まねで整えていきます。

.title-view {
  width: 100%;
  height: 500px;
  min-height: 60vh;
  background-size: cover;
  position: relative;

  @media screen and (max-width: 480px) {
    height: 600px;
    min-height: 80vh;
    background-size: cover;
  }
}

( @media screen and (max-width: 480px)〜以下が、モバイル版に対してcss上書きされている箇所です)

 

スケジュールが押して泣く

画面のモック作りでスケジュール遅れてしまっていたので、順算でいくと期日が間に合わず、先輩にコーディングをガンガン手伝ってもらいながら、どうにかこうにか仕上げました。というかコーディングは質問しまくり、ほぼ頼りっきりでした。不甲斐なくてすみませんッ…! 今回時間なくてわからないままになあなあにやってた 部分もいずれはちゃんとわかるようになりたいです。 ブラウザのチェックもすませ、ごにょごにょ(たくさんありすぎて割愛)修正しながらちゃんと表示されてるか確認します。

 

怒涛の2ヶ月間

どうにかこうにか初めてだらけで一瞬で2ヶ月間でしたが、社内確認や環境確認も終え、9月頭にリリース!ああ〜〜〜 すっごい荒削りで作ったけれど、新卒採用に少しでも何か影響できたらいいなと思います。

実際のページはこちらになります。 fresh-recruiting.goalist.co.jp

新卒採用サイト作成記、クローズ!!

デザインに最も必要なものは健康である

f:id:goalist:20170920091450j:plain

 

こんにちはミツイです。
デザイン、健康、、いきなりなんのこっちゃですね。
ちゃんと順を追って説明します。

 

先日、ゴーリストのデザインチームでバリューを作りました。
そもそも、ゴーリスト自体にミッション・ビジョン・バリューがあります。
ミッションを「存在意義」、ビジョンを「中期的Goal」、バリューを「価値観」として決め、
それを一番大事にして日々働いています。
※ゴーリストのミッション・ビジョン・バリューについて気になる方は、こちらを御覧ください。
https://recruit.goalist.co.jp/culture.html

 

今回作ったのは、デザインチーム独自のバリューです。
「デザインする時に大事にすべきこと」という価値観を、改めてチームで共有できるように明文化します。
なんでわざわざバリューという明文化されたものを作るか
というのも、そもそもの価値観がズレていたらチームとして成り立たないからです。

 

例えば、野球のバリューの一つには「勝ちたい」というのがあります。
「勝ちたい」というバリューがズレていたら、野球というゲームそのものが成り立たない。
負けようとしているチームと対戦するのを想像してもらえれば、分かりやすいんじゃないでしょうか。
負けようとしているチームはルールには則っていますが、バリューは守っていません。
「勝つ」よりも「楽しむ」を優先することもありますが、それでも「勝ちたい」というバリューが一致しなければ、
一緒にゲームをすること自体楽しくありません。
なので、バリューを守ると言うとニュアンスが違うかもしれません。
守るというよりも、バリューを持つ。バリューを持って、働くことが大事だと思います。

 

というわけで、デザインチームのバリューを作成すべく、メンバー全員で喧々諤々の話し合いをしました。
日常のタスクから離れて一つ高い視点で考えるために、社外の会議室を借りてのミーティングです。

 

手順としては、
1.各自、デザイナーとして働くにあたって、自分が大事だと思う価値観をポストイットに書き出す。
2.ホワイトボードに張り出し、それぞれを説明してもらう。
3.なんとなく近いものを島みたいにまとめていく。
4.それぞれの島について話し合う。
という感じ。

f:id:goalist:20170724165934j:plain

1.2.こんな感じで書いたポストイットを張り出し

 

f:id:goalist:20170920092127j:plain

3.近いものをまとめていきます

 

f:id:goalist:20170920092222j:plain

4.それぞれについて話し合う

 

4の話し合いが喧々諤々でした。
大体みんなの言いたいことは一緒だったんですが、それが何を意味しているのか、
その本質を見極めようと、半日以上かけて話し合いました。
で、結果できたのが以下の7つのバリューです。

 

【全ては健康から】
心身ともに健康であることは、仕事をする上でも大前提です。
体調が悪いと、判断軸がブレます。
体調が悪いと、必要な時に役に立てません。
体調が悪いと、仕事が楽しくなくなります。
〆切だろうがなんだろうが、健康を害してもいい理由なんてありません。
自分の中でベストの状態を守ることを優先してください。健康第一。

 

【敬意を持つ】
独りよがりのデザインは、迷惑でしかありません。
デザインを見る人、依頼してくれた人、一緒に働く人に敬意を持ってデザインすること。
もちろん、人を完全に理解することは不可能ですが、だからこそ理解しようと務めることが大事です。
デザインのためのデザインをするのではなく、人に目を向けてデザインしましょう。
思いやりが伝わるデザインや行動を心がけましょう。

 

【見つける力】
デザインは「問題を解決するため」にあります。
問題を発見して解決するという一連のプロセスがデザインです。
なかでも、人々が抱えるニーズや問題を発見することは出発点であり、いちばん大事なところ。
問題は、発見した時点で8割は解決しています。
当たり前になっていることにも疑問を持ち、人から困りごとを聞き出し、問題の本質を掴みましょう。

 

【発見即シェア】
作業を分担する人の集まりではなく、お互いを高め合うチームでありたいです。
発見したことや得た知識はすぐにシェアして、皆の発見にしましょう。
他のメンバーの目や知識が加わることで、発見はさらにブラッシュアップされて価値も高まります。
ちょっとしたことでも良いです。発見した時にテンションが上がったなら、その発見はシェアする価値があります。

 

【ユニバーサルスケジュール】
無理なスケジュールは、いい仕事の敵です。それに健康にもよくない。
みんなに優しい、ユニバーサルスケジュール(誰にも優しいスケジュールという意味の造語です)を組みましょう。
スケジュールというのは、要するに、問題を解決するために決めるものです。
問題をしっかり理解して、そのためにスケジュールを守る。
遅れそうだったら、周りに助けを求めてください。一人で無理しない。
徹夜自慢とか止めてください、本当。

 

【三方よしの成長】
個人の成長は、会社の成長に繋がって、ひいてはお客さんのメリットにもなります。
成長を犠牲にしてまで目の前の仕事をすることは、結果、三方よろしくない。
ただ目の前の仕事をこなすのではなく、未来のための時間を取ってください。
今の仕事で自分が何を学べるのかを考えながら仕事をすることが大事です。
会社をうまく使って、自分の成長のために仕事を利用してください。

 

【より高い山へ】
低い山を登れば、低い山頂にしか着きません。
低い山を登るのは、楽しいかもしれないけど嬉しくはならない。
前よりも高く、できる限りの高い目標を掲げて、壁にぶつかり、道に迷い、くたくたになりながら山頂に着いたら
めちゃくちゃ嬉しいはずです。
登った先でしか見えない景色を目指して、困難を楽しみましょう。

 

それぞれがめちゃめちゃ大事だと思っているんですが、
一番最初に来るのが「全ては健康から」です。
すごい当たり前のことですが、これがなかなか守れていないことが多い。
なので「デザイン」という言葉からはかけ離れた言葉ですが「健康」を一番に掲げました。

 

やっと冒頭の「デザインに最も必要なものは健康である」に繋がりました。
デザインにかぎらず何をするにも「全ては健康から」です。
(※もちろん、人それぞれ健康の基準は違います。その人にとっての健康という意味です)
その上で「より高い山へ」登るべく、メンバー全員バリューを持ってデザインしていきたいと思います!

 

なお、バリューに共感していただけるデザイナーの方がいらっしゃいましたら、お声がけください。
ぜひ一緒に働きましょう!

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

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

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

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

 

ググってみた

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

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

 

今回編集したいのはサーバーサイドエンジニアの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