Goalist Design Blog

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

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

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

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

前回までのおさらい:

先日の投稿では新卒採用サイトの企画からラフスケッチの段階までを記事にしました。
ワイヤーも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

 

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

素敵。

 

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

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