KIRINのWEBサイトのデザインがすきだからまとめてみた

KIRIN WEBサイト

こんにちは!YOUKNOWです。

KIRINのWEBサイトが良いという話を以前の記事であげました。
そのおかげで気づいたのは、KIRINのWEBサイト好きかも…ということ!

なので!KIRINのWEBサイトで好きなページ20ページを!まとめて公開しておこうと思います。

KIRIN WEBデザインまとめ

パーフェクトフリー

KIRIN WEBサイトまとめ

一番搾り1ケースを抽選でプレゼント

KIRIN WEBサイトまとめ

キリン フレビア

KIRIN WEBサイトまとめ

KIRIN キリン 氷結®

KIRIN WEBサイトまとめ

グランドキリン

KIRIN WEBサイトまとめ

KIRIN キリン ハードシードル

KIRIN WEBサイトまとめ

KIRIN FIRE(キリン ファイア)

KIRIN WEBサイトまとめ

一番搾り フローズン生 デコビールキャンペーン

KIRIN WEBサイトまとめ

キリン メッツ スペシャルサイト|キリン

KIRIN WEBサイトまとめ

ココナッツウォーター | トロピカーナ|Tropicana

KIRIN WEBサイトまとめ

のどごし生 ワイワイは、うまい!キャンペーン

KIRIN WEBサイトまとめ

キリンフレビア

KIRIN WEBサイトまとめ
キリンフレビア

OMOTESANDO CIDRE by KIRIN HARD CIDRE

KIRIN WEBサイトまとめ

キリンレモン

KIRIN WEBサイトまとめ

果汁とお酒だけ|KIRIN本搾り(TM)マガジン

KIRIN WEBサイトまとめ

脂肪と糖に立ち向かえ!食事と一緒につぶやいてパーフェクトフリーが当たる!

KIRIN WEBサイトまとめ

純水果汁シリーズ

KIRIN WEBサイトまとめ

キリン メッツ

KIRIN WEBサイトまとめ

生茶

KIRIN WEBサイトまとめ

食事の生茶

KIRIN WEBサイト

飲料メーカーのWEBサイトを調べてみた

WEBデザイン 飲料 Mets

こんにちは!YOUKNOWです。

業務で飲料のサイトデザインを行った時に、リサーチとして他の飲料のサイトはどんな感じのデザインなのかを調べました!

結果からいうとメーカー別で特にWEBデザインに力を入れていると思ったのはKIRINで、時点でコカ・コーラ社じゃないのかと感じました。

WEBデザイン 飲料 アクエリアス

特にコカ・コーラ社のアクエリアスのデザインは個人的に大好きなデザインでした。
1年か2年位前まではポカリスウェットのほうが好きでしたが、今はリニューアルされたアクエリアスのサイトのデザインのほうが好きです。

わりと飲料とかって、大事なのは味もですがブランディングもとっても大事だと思うのです。
飲料のサイトでWEBサイトに載せなければいけないような情報ってあまりないなあって思ったりします。

そこをキャンペーンとか、グラフィックとかで飲料自体のファンを増やしたりすることが大事だと考えています。
だからデザインはある程度魅せる感じにしてしまっても良いというのが持論です。

とりあえず飲料業界でも有名な上記企業を調べました。
(リンク先は全て飲料商品一覧のページに飛ぶようになっています)

そういった意味で見るとやっぱり飲料別のブランドサイトにこだわっていて、ぱっと見のデザインにもこだわっているKIRINさんが一番効果的なWEBサイトを構築できているんじゃないのかなぁ..?と考えました。

そしてどの企業さんもスマートフォンに最適化して作ってある所が多いと感じました。
中にはもうこれ完全にスマートフォンメインで、パソコンはおまけレベルなものも多くありました。
もうこれが業界のスタンダードですが、個人的にはPCデザインを眺めるのが好きなのでしょぼんです。

とはいえ、こうして全体を見ると本当にKIRINはWEBデザインに力を入れているんだなあと強く感じました。もうほぼ独走状態と言ってもいいレベルで..。
これはしっかり若者の心をぐわっと掴んでいるはず…!WEB製作者はがっしり掴まれている…!

そういえばKIRINはSplatoon!のフェスなんかでもマーケティングしてますね…。
なーんて思っていたら、そういえばGRANDKIRINでSNSを使ったすごいマーケティングしてたのを思い出しました。

それについて調べていたら、どうやら優秀なマーケティングチームが社内にいる模様…!さすがです。

WEBデザイン 飲料メーカー

そんなこんなで今朝KIRINが遂にASAHIを抜いた!(ビールで)という記事を見ました。
やっぱりこういう活動が実を結んでるんだろな〜なんて思って、改めて検索をかけてみたら

KIRINが抜いたASAHIが抜いたサントリーが抜いた…とぐわっと出てきました。

これは水面下の戦いが激しい業界でもありそうです…!

俺的まとめ

WEBデザインに関してはKIRINが圧倒。
これから飲料のサイトデザインはKIRINさんのデザインを参考にしながら制作しようと思います。

黄金比や白銀比を図ることができるWEBサイト MetallicRatio

MetallicRatio

こんにちは!YOUKNOWです。

デザインをしている時に、一般的に美しいとされている比率に頼りたくなる時があります。
もちろん頼りすぎはよくありませんが、なんの取っ掛かりもない状態でデザインしなくてはならない場合、一般的に美しいと言われるカタチでデザインを作ったほうが結果的に良いデザインになることが経験上多い気がします。

MetallicRatioは、そんな一般的に美しいとされる黄金比白銀比を簡単に計算することが出来、デザイン業務に非常に役に立ちますのでご紹介します。

個人的にWEBデザインでオススメなのは白銀比

しかしWEBデザインに黄金比はなかなか合わせるのは難しいかなぁと思っていて、個人的によく使うのは白銀比だったりします。

また黄金比や白銀比に頼りすぎると、地味で飛び出ない印象が強く出てきます。
どこか一部分を崩したり、強調したりそういった工夫をすることでインパクトが出るデザインになりやすくなると思います。

【2015年6月】新人WEBデザイナーが素敵だと感じたWEBサイト10選

こんにちは!YOUKNOWです。
チェックしているWEBデザインの中で気になったものを毎月まとめてご紹介する記事です。

※最新のwebサイトではなく、僕が最近見つけたサイトを独断と偏見でまとめて掲載しています。

大竹学園-大竹高等専修学校

東京で調理師・服飾(ファッション)の専門分野を学べる高校|大竹学園 大竹高等専修学校 - http___www.ohtakegakuen.ac.jp_

http://www.ohtakegakuen.ac.jp/
大竹学院のサイトです。
可愛いデザインで見つけた時に即保存しました。おんなのこかわいい。
写真の使い方と、パターンがうまく使われていて楽しくてポップな感じが出ていると思います。
ファッション雑誌のようなデザインの綺麗さもあって、ただただ「おぉ…」となるばかりです。すごいです。素敵です。

村上農園ホームページ

村上農園ホームページ - http___www.murakamifarm.com_

http://www.murakamifarm.com/
村上農園のWEBサイト。
トップページも素敵ですが、個人的に推しているのは中ページのデザイン。

村上農園ホームページ - http___www.murakamifarm.com_

洞見てくださいこの中ページ!中ページがとんでもなくオシャなんですよ…!
こんなに見やすく、かつオシャ…!!背景にはノイズを敷いていたり小技も効いていてもう…!

女子旅つくるプロジェクト

女子旅つくるプロジェクト|JTB × KOBE COLLECTION - http___jtpj.jp_

http://jtpj.jp/
しかしまとめてて思うのは、女性系のものは本当にデザインがいいなぁってこと!
それだけ女性がデザインを重視しているってことなんですよね。

 女子旅つくるプロジェクト|JTB × KOBE COLLECTION - http___jtpj.jp_

中ページももちろん綺麗にできています。
WEBサイトも最近はWEBサイトっぽさがなくなってきてる感じがします!
文字とかにもこだわっていて、最近はpng画像で文字を見ることや作ることが増えてきたなぁと思います。
ここらへんは検索エンジンの進化とも関係してると言われていますが..どんどんとできることが広がっていきますね。

あらい農園

京都 京北・向島の農家あらい農園 I 京都の京北(けいほく)と向島(むかいじま)で農業を営む、あらい農園のオフ_ - http___arai-nouen.net_

http://arai-nouen.net/

アイディアがビリビリと…。工夫にあふれたサイトで超興奮してます。
こういうサイトって今は結構少ないんじゃないでしょうか?

京都 京北・向島の農家あらい農園 I 京都の京北(けいほく)と向島(むかいじま)で農業を営む、あらい農園のオフ_ - http___arai-nouen.net_

この水色の部分が凄く気に入ってます。これ言葉で説明するより実際にみてもらうとおぉ…ってなるのでぜひぜひ見て震えて下さい。
ノイズをかけたり、影を入れたり、立体感を出したり…グリッドをあえて崩したり。もうとにかく最高です!!

マイ・フェイバリット関西

関西のおでかけWEBマガジン マイ・フェイバリット関西(マイフェバ) - http___www.my-fav.jp_

http://www.my-fav.jp/
マイ・フェイバリット関西のサイト。
きれいに整えられていて、とっても見やすいサイトです。
でもなにより気に入ってるのは、この一つ一つのバナーのレベルの高さよ…!
なんでこんな綺麗なんや…。

マイ・フェイバリット関西

http://www.my-fav.jp/feature/
この素敵なバナー達がいるおかげでトップページがより魅力的に見えます!

ニシアワー

ニシアワー|ぐるぐる、めぐる。岡山県西粟倉村の挑戦者たち活動をお伝えするメディア - http___nishihour.jp_

http://nishihour.jp/
ニシアワーのサイト。
写真やイラスト等の小物全てのレベルが高いです。

ニシアワー
Internet Archiveより
実はこのサイト、プチリニューアルをしたらしくヘッダー周りが変更されています。
この写真は変更前ですが、このヘッダーも大好きでした。

ニシアワー

中ページも素敵ですね。ついつい引きこまれてしまいます…。

インテリジェンスの派遣

HELLO,WORLD! インテリジェンスのエンジニア派遣 - http___inte-helloworld.jp_

http://inte-helloworld.jp/
トップページのグラフィックが個人的に大好きでした!
グラフィックとWEBならではの動きの表現がうまくマッチしていた事が何より良かったです。WEBっぽい!

NURO光 forマンション みんなの応募状況

NURO光 for マンション みんなの応募状況 - https___nuro.jp_mansion_status_

https://nuro.jp/mansion/status/
丁度NURO光と契約するときに見つけたサイト。
KISHIBOYが翻弄されるのを眺めて和むサイト..。
こういう動きのサイトもかわいくていいですね…!

株式会社リッシ

RISSIINC. - http___www.rissiinc.jp_#
http://www.rissiinc.jp/
制作会社リッシのサイト。


動きが凄いです。これを見て真っ先に東のエデンのEDを思い出しました。大好きなEDです。

RISSI

一部ですがGIFにしてみました。他のところもすごい動きなので一度ぜひサイトでご覧になってください。

humming by TURNER COLOUR SPICE

ペイント生活をはじめよう I humming by Turner _ - http___www.turner.co.jp_t-colourspice_paint_
http://www.turner.co.jp/t-colourspice/

こちらも動きが良いサイトです。スクロールに応じてコンテンツに合うように写真が動いていきます。
ストップモーションアニメとWEBを組み合わせたデザインです。

残念ながらフラッシュなので、iPhone等のスマートフォンでは閲覧出来ませんが、とてもクオリティの高いサイトです。

まとめ

少し前まではグリッドをかっちりきめるサイトが多かった印象ですが、最近は意図的に一部崩したりアニメーションしたり工夫が加えられてるサイトが増えてきた印象でした。

またWEBならではの表現に+でグラフィックの紙面的な表現が加えられているサイトが多くなってきた気もします。
特に女性をターゲットにしたサイトはそれが顕著にあらわれていました。

また先月もまとめていますので、よろしければご一緒にご覧ください

新機能!Photoshop2015 アートボードの使い方

Photoshop2015

こんにちは!YOUKNOWです。

Photoshop2015で遂にPhotoshopにアートボードが追加されました。

アートボードの使い方がわからず少し困ってしまい、時間をとってしまったので、今日はPhotoshopのアートボードの使い方をご紹介します。

なお、Photoshop 2015以下ではこれらの機能は利用できません。ご注意下さい。

Photoshop アートボードの使い方

アートボードの作り方

Photoshop2015 アートボード 作り方

アートボードの作り方はまずPhotoshop2015を起動し、⌘+Nで新規ウィンドウを開きます。
すると上記の写真のような画面になりますので、このドキュメントの種類のプルダウンメニューからアートボードを選択します。

Photoshop2015 アートボード 作り方

自分が作成したいアートボードのサイズを指定し、OKを押しアートボードを作成します。

複数のアートボードの作り方

Photoshop2015 アートボード 作り方

自分がよくわからなかったのはここです。同一キャンバス上に複数のアートボードを作成する方法をご紹介します。

Photoshop2015 アートボード 作り方

Photoshop2015にはツールバーにあたらしくアートボードツールが追加されました。
移動ツールを長押しするとアートボードツールが現れますのでアートボードツールを選択します。
もしくは、移動ツールを選択した状態でSHIFT+Vでもアートボードツールを選択することが出来ます。

Photoshop2015 アートボード 作り方

アートボードツールを選択すると、上記の写真のようなPhotoshopの上の方にアートボードツールの詳細な設定を行う場所が表示されますので、追加したいサイズのアートボードをサイズから選択し、画像のオレンジ色で囲っている場所を選択します。

その後、アートボードを追加したい場所をクリックすることで、同一キャンバス内でアートボードを作成することができます。

わかりやすいように、流れを録画したGIFファイルを載せておきます。

同一キャンバス内にアートボードを追加する

アートボードのサイズを変更する方法

アートボード サイズ変更

すでにあるアートボードのサイズを変更したい場合も、アートボードツールから変更が行えます。
変更したいアートボードを選択し、アートボードツールの詳細設定からサイズを変更する事でアートボードのサイズを変更することが出来ます。

おわりに

Adobe系のソフトはどんどん進化していくので、ソフトの使い方を覚えるのがなかなか大変です..。
しっかり新機能も使いこなせるようにして、案件ごとに使い分けられるように精進したいとおもいます(震え)

公式・個人アカウント用 LINEカバー画像制作用PSD

lineカバー画像 psd

こんにちは!YOUKNOWです。

昨日は早くに帰って早めにぐっすりしたお陰で頭も冴え渡っています。
おかげ様で就業時間の1時間30前につき、他の人が来るまでのんびりすることが出来ました。
コーヒーとかが飲めるお陰で自分の家にいるよりか快適です。ラジオもあるしクーラーもあるから涼しいし良いです。
我が家は節電の影響でじめっとしてて熱いですから…

さて、最近業務で企業さんのSNS用画像一式を制作し、LINEカバー画像作成等、以外と時間がかかってしまったので次回以降再利用できるようにLINEカバー画像作成用PSDを制作しました。

同じように業務で制作される方がいらっしゃると思うので、PSDをおいておきます。

LINEカバー画像 PSD

LINEカバー画像制作用 PSDについて

line カバー画像

例のごとくスマートオブジェクトで制作しています。書き出しは全てスマートオブジェクトの編集画面の方から行って下さい。お願いします!
スマートオブジェクトを用いて制作しているために、作ったデザインでどのように表示されるかが、すぐわかるようになっています。

photoshop 画面分割

こちらで紹介している画面分割を使うとより便利に制作出来ます。

ぶっちゃけた話

公式アカウント用のカバー画像作成のお話が来て、実際に制作したのですが、公式アカウントのアカウント権限を頂けた訳ではないので、公式の推奨サイズ等は不明です。
ただ、指示書通りに作ったことと実際にアップロードされて運用されている所を見ると、どうやら問題なく動いているようです。

実際のお仕事で使う際は、もろもろ確認しながらご利用下さい。

LINEカバー画像 PSD使い方

LINE公式アカウント psd

psdファイルを開くとこのようなレイヤー構造になっています。

赤く印がついているレイヤーのオレンジ色で囲った所をダブルクリックすると、スマートオブジェクトが開きます。
「iconレイヤー」は、LINEプロフィール画像で、「←をdoubleClickで編集レイヤー」はLINEカバー画像です。わかりづらくてすみません…

LINEプロフィール画像の書き出し方

LINEプロフィール画像の編集は、「iconレイヤー」のスマートオブジェクトを開いて行います。
上記の写真のオレンジで囲った所(iconレイヤーの方)をダブルクリックしてスマートオブジェクトを開きます。

LINE公式アカウント psd 作り方

スマートオブジェクトを開くと、このように表示されると思います。
半透明な赤色の「pictureレイヤー」は、LINEの仕様上アイコン画像は丸くマスクされてしまいますので、どの位置でマスクされるかがわかるようにガイドのような役割を果たします。

「pictureレイヤー」の下でデザインを行い、デザインが完了したら⌘+ALT+SHIFT+SでWEB用に保存で書きだして下さい。
「pictureレイヤー」はガイド以外の意味はありませんので、書き出し時にはpictureレイヤーは非表示にしてから書き出して下さい。

書き出しは画像のサイズを640×640、ファイル形式はjpgまたはpngになってる事を確認してから、書きだして下さい。

LINEカバー画像の書き出し方

基本的にはプロフィール画像と同じ手順で書きだすことが出来ます。
今度は、←をdoubleClickレイヤーのスマートオブジェクトを開いて編集します。
デザインを決めたら、そのまま⌘+ALT+SHIFT+SでWEB用に保存で書きだして下さい。

書き出しは画像のサイズを1080×878、ファイル形式はjpgまたはpngになってる事を確認してから、書きだして下さい。

プロフィール画像/LINEカバー画像について

LINEプロフィール画像(アイコン)のサイズ

line_profile

このPSDでは書き出し後のサイズを640×640で制作してあります。

LINEカバー画像のサイズ

line_cover

このPSDでは書き出し後のサイズを1080×878としてあります。
公式では、720×360以上がよいとされているそうです。

ちなみに


こちらの記事に、Facebookのカバー画像について書いてありますので、合わせてご覧ください。

個人用アカウント_line
ちなみに、このPSDですがそのまま個人用のアカウントに流用することもできます。
このPSDで作った画像を個人用のアカウントに当てはめるとこうなります。

ほぼ同じ結果になりますので、個人用のLINEをちょっとクリエイティブにしたい人にもオススメです。ぜひお役立て下さい。

とあるデザイン制作会社の新入社員の1日 デザイン制作会社について

とあるデザイン制作会社の新入社員の1日 デザイン制作会社について

こんにちは!YOUKNOWです。

昨晩はFacebookのog設定…Facebookでシェアして頂いた時に一緒に表示される画像が灰色の画像になってしまっていた問題を修正しようと朝早くまで頑張って修正してました。
直したら寝ると決めて作業をするという致命的な失敗のせいで、終わったのは朝5時。出社は10時。
でもなんとか修正出来ました。良かった。

結局二重でog:imageが設定されていたらしく、それにはすぐ気づいたのですが修正しても治らず、混乱しながら無意味に色々なことを散々試しました。
学んだのはFacebookのogにはFacebook側にキャッシュがあるらしく、それを削除しないと修正しても反映されない(?)恐怖の仕様に惑わされ、そのまま3時間をボッシュート。
かなしい

おかげ様で良い時間になってしまい、いつも通りにiPhoneのアラームだけでは確実に起きない予感がしたので、
かねてからお世話になっているWEBサービスKuKuclockを使用しました。

KuKuclockはWebブラウザで利用できるアラームサービスです。
ブラウザなのでMacでもWindowsでもタブレットでもインストールせずに使用することが出来ます。
ただしFlashを使用しているので、iPad等のタブレットで使用する場合は、Flash対応のブラウザアプリを用意しないといけません。(iPadがあるならこんな無駄なことをしなくても、アラームアプリを使用したほうが100倍マシです)

Windowsとかの場合、Windowsアップデート等でコンピューターが再起動してしまうと、アラームはならないので死にます。

社会で生き残る生存戦略としてはガバガバもガバガバ、使うに耐えない技なのですが、我が家にiPhone5s以外の時計はないのでこれで凌ぐしかないのです。
しかもそういう時に限ってiPadは充電が切れていたり、iPad miniは会社に置き忘れていたりするものです。
iPhone5とiPhone4sなんて最後にいつ使ったのかさえ覚えていなわけなのです。

結局Windowsのパソコンをつけっぱなしに、Windowsアップデートの恐怖に震えながら床についたのが6時、KuKuclockが起動するかしないかの勝負に勝ち、朝の8時に起き遅刻はしなかったので結果オーライ。
明日から早く寝ればいいんです。今日は耐えればいい。

丁度お仕事も少ない日で良かった。

それなので今日学ぶことも、大体自習になってしまうので今日はデザイン制作会社の1日をご紹介したいと思います。

※これは僕の経験や友人たちの話を聞いて書いています。全ての制作会社の話ではありません。
また僕が所属している会社の話というわけでもありません。フィクションと思って読んでいただけると幸いです。
デザイン制作会社に入ってみたいけど、どんな感じなのか分からないという方のお役に立てればと思って書いています。

制作会社の1日

SW_Zak+Suhar-2

朝出社したらメール確認をしつつ、新人のお仕事の掃除を終えコーヒーで一息つきます。
まだ誰もきていない会社は少し過ごしやすいです。
月曜日なので、掃除機がけ等やることも多く、寝不足の体にはなかなか応える作業です。
終わったあとのコーヒーはやっぱりなんかうまいとは違う、やったぜ的感覚。自分でも何言ってるかわからない。

このコーヒー入社当時は苦いだけで全く飲もうとは思わなかったのに、発注作業の時にスタバのハウスブレンドをしれっと発注し、そのまま受理されたのをキッカケに
あまりおいしいとは思わないけど、飲むようになりました。ブランドが人に与える影響しゅごい

そんなこんなで二ヶ月も飲んでると、なんか段々うまいというか、出社→掃除→一服(コーヒー)の流れが定着して、なんとなく1日の流れに必要な儀式的な感じになってきたわけです。
なんとなく頭が冴えるというかそんな気がします。

そういった細々とした作業が終わったら、1周間の中で誰が何を担当するかのデザイナーズ会議が始まります。

お仕事は、基本的にディレクターさんや営業さんがお仕事を取ってきてくださって、それを僕達デザイナーやコーダーさんにディレクターさんがお仕事を割り振ります。

そうった割り振りのお話や、全体的なスケジュールをこのデザイナーズ会議で教えていただきます。
僕はまだ新人なので、ディレクターさんから先輩デザイナーさんにお仕事が割り振られ、先輩デザイナーさんが割り振られたお仕事の中から、新人デザイナーの技量にあったお仕事を先輩デザイナーさんから僕達新人デザイナーに割り振ります。
なので新人デザイナーがやるお仕事は、先輩デザイナーさんが作ったTOPページのデザインテイストに合うようにサブページ等を作成したり、バナー画像の制作を行います。

そんなこんなで、14時になります。
うちの職場のお昼の時間は一般の時間よりもかなり遅く、大体14時から16時の間で各々食べに行きます。
お昼休憩の時間は大体1時間です。
ランチの時間はもう過ぎてしまっていることがほとんどなので、会社に勤めて1−3年目の人は、大体お弁当を持参するか、コンビニに食べに行くかファーストフード店で済ませます。

なぜこんなに食事の時間が遅いのかというと、制作会社の性質上、退社時間が遅くなってしまうという問題があるためです。
退社の時間は平均で23時~終電になってしまう為夜遅くに帰ってからご飯を食べるとすぐ太ってしまうんですね。
だからお昼を遅くすることで夜ご飯を食べなくても済むようにし、朝起きてたくさん食べ、お昼の時間をずらして食べる2食型の人が多いように思います。

新人は始業時間には到着しなくては行けない決まりがありますが、2年目からは午前中であれば好きな時間で出社することができるので、よりこの2食型のカタチがとりやすくなっていることから、自然にお昼の時間が遅くなっていきます。

お昼を終えると、いよいよ本格的に作業が始まります。
バシバシと作業し始めるので夕方からの職場は本当に静かです。カタカタぱちぱちとキーボードやマウスの音とラジオの音だけが聞こえる感じです。
夕方から退社時間まで作業は続き、大体終電前にみなさん帰宅されます。
納期前でどうしても仕上げなくてはいけない案件がある場合のみ、泊まり込みの作業等もあるそうです。

こんな感じの流れで1日が過ぎていきます。

デザイン業界について -デザイン制作会社編-

SW_Zak+Suhar-22

制作会社はこうした性質上、みなし残業年俸制が採用されており、基本的に残業代は出ません。(もちろん出るところもあります)
…が、個人的なお話をすると好きなパソコンとデザインができる環境なのでそこまで不満はないです。
ここは本当に合う・合わないが出る職業だと思います。
もちろん合わない人もたくさんいますので、会社をやめる人はかなり多くいます。

デザイナーさんはやはり美大を卒業した人や、変わった経歴をお持ちの方が多くいます。
コーダーさんは小さいころからパソコンに慣れ親しんだ人や、新しいことが大好きな人が多い印象です。

デザイナーさんはPhotoshopやIllustratorを主に使用しデザインを制作している所が多く、そのソフトの基本的な使用方法は前提としてマスターしておく必要があります。

コーダーさんになりたい場合は、最近ではGitHubの使い方EmmetやSass等の効率的なコーディングができる方が求められているようです。
これは会社や時期によって大きく異なります。
いつの時にも言えることなら業界水準に追い付くための努力が出来る人が求められているのではなかろうかと考えます。

会社の雰囲気も本当にまちまちだと聞いています。デザインやコーディングは手に職がつく技術系の職業なので
、転職ありきの業界です。
ステップアップするために転職する人も多いです。なのでどうしても人間関係等、合わないなーと思ったら職業から足を洗うのではなく、会社をやめるという選択肢もあります。

そのため、転職ありきだということがわかっているのか、募集の備考欄には結構な確率で、実務経験3年以上等と記載がされています。

個人的な考え

SW_Zak+Suhar22-2

結構特殊な感じの職業だと思います。選考方法もポートフォリオ(作品集)が必要だったり。
でも間違いなく楽しい職業でもあります。接客業はお客様からありがとうと言われた時に嬉しいですが、デザイン制作の嬉しさは、作り上がった時の達成感、自分が作ったものが世に出て、例えばLINEのカバー画像だったらそこにいいね!されてるだけで飛び上がるほどうれしいし、自分がデザインをしたキャンペーンに何も知らない友達がしれっと参加してたりしている時。もうこれらは本当に一例だけど、こうした時が本当に好きでたまりません。

デザインに答えはなくて、答えが見つからなくて作ってる時はストレスが溜まることもあるけれど、デザインを嫌いにならない限りはこの職業人でありたいなって思える魅力があります。
そうしたものと、労働環境とかもろもろを天秤にかけてやってみたいと思えたら飛び込んでみても良いのかもしれません。

文字レイアウトの参考になるポスター等 20選

ポスター 文字

こんにちは!YOUKNOWです。
社会人になってから休日の貴重さが分かりますね…!
今週末は、東京に来てから全く乗る機会がなくなってしまった車に乗ってきました。
免許をとった時以来の運転でしたのでだいぶ不安でしたが、慣れてくると運転は楽しいですね。
練習のつもりのレンタルでしたが、案外なれるのに時間もかからずそのまま横浜へ行ってきました。
夜景キレイだし、海の匂いもするし、気分転換には持って来いの横浜..!住みたい…

レンタカーを初めて利用したのですが、思っていたほど値段も高くなく、都会に住むならレンタカーで十分かなあ、なんて思いました。

明日からまたお仕事ですが、もう少しセンスを磨かないと先輩方からの修正指示が減りそうになさそうだったため、今週末はひたすらセンスの良いものを見るようにしてました。
そんな中で、先日こんな記事を見つけました。

良いまとめだなぁと思うと同時に、丁度センスの良い文字レイアウトの参考になりそうな作品をまとめていたので、同じネタでまとめてみようかなぁと思います。
個人的に好きなポスターかつ文字のレイアウトが参考になる。そんな作品たちのまとめです。

新人WEBデザイナーがまとめる文字のレイアウトが参考になるポスター&広告20選

Graduation Exhibition 2014 Poster

アジアの卒業制作展のポスターでしょうか。
文字の入れ方が大胆で素敵ですね。文字をインクで隠したり、影を使って奥行き感を出しています。
単純に文字を載せるんじゃなくて、こうしたテクニックをするとより素敵に見えますね!

森 留 白

文字を載せるのではなく、文字のカタチでくり抜いて魅せています。
文字に葉っぱがかかってたり、かかってなかったり、ただ文字のカタチにくり抜くだけじゃない小技がいい感じにきいてて、素敵に仕上がっていますね…!

多摩美術大学 卒業制作展ポスター 2009

日本の美大の中でも特に有名な、多摩美術大学の卒業制作展ポスター
文字の上に、後ろに水玉が沢山…!
この作品が凄いなぁと思うのは、タイポグラフィのバランス感覚だと思います。
単純なグリッドだけじゃない、行ごとにずらしながらも全体としてのバランスがしっかりとれている所。
どうして、このカタチが綺麗に見えるように作れるのでしょう…!!製作者さんのバランス感覚の良さがにじみ出ているポスターですね…!

あいま展 ポスター

もうね…このイラスト大好きなんです。
文字のレイアウトとしては、そこまで特徴があるわけではないですが、この白で抜いてある文字。
大事な文字要素は下の方に見やすく配置。それ以外の文字も配置しなくてはいけないけれど、それ以上にこのイラストを魅せたい!そんな心意気がビシバシと伝わってきます。

忘却のサチコ

今、夜中に描いているんですがお腹すきました…
忘却のサチコの単行本の表紙です。ダイナミックなロゴで思わず手にとってしまいそう。
ひらがなの の を小さくすることで顔が隠れないようにうまくタイポグラフィを作ることに成功しています。
でもなんで忘却なんでしょう?と思ってついつい試し読みしてしまいました。どう見ても食についてのイラストなのに…!!おなかすいた!

静岡文化芸術大学 デザイン学部卒業制作展ポスター 2007

文字を配置する時に、文字の後ろをぼかす等の加工をすることで文字に集中することも出来るんだなと学びました。
このポスターはキャッチコピーの 見えるもの 見えないもの というキャッチコピーに合わせてこうしたグラフィックにしたと思いますが、そのお陰で写真背景のポスター等は文字を配置する所だけぼかしたりするのもアリかも!と気づかせて頂きました。
このぼかしの感じすごく好きです。

リアル感電!!

写真の上にそのまま文字を載せると少し読みづらいと思う時もあります。
静岡文化芸術大学の卒業制作展ポスターには、ぼかしてその上に文字を載せるというやり方の気付きをもらいましたが、これは写真に近い色のベタを文字の背景色にすることで、文字の可読性を高めています。
自分は今までこういったポスターを作る時は白背景か黒背景のベタを作り、その上に文字を配置していたのですが次からは近い色も検討してみようと思います…!
ちょっと話は違いますが、そういえばiTunesで曲を選択した時の背景色も、ジャケットの色と似た色になりますね!

東京都知事選挙ポスター

都知事選挙にこんな良いポスターがあったなんて…!!
斜めに見やすく、文字の場所とイラストの場所で背景色を変えることで良いリズム感が出ていると思います!
選挙なので、投票日等は目立ってないといけませんから、真ん中の目立つ所にうまく配置するこのやり方はナイスでベストだと思います。

PARCO

札幌パルコのポスターです。
これは僕もよくやる手なのですが、文字の周りに光彩をつけて可読性を高めるテクニックです。
この手法を使えば、背景と似た色で文字を付けても文字として読ませることが可能です!
しかしおしゃれなポスターですね…!デザイナーとしてこの雰囲気を出せるようになりたいですな!

味の素 ポスター

こうして文字を入れる所だけ、背景の要素をなくす事で文字を目立たせるテクニックです。
また文字も印鑑風にすると、写真背景と合わせやすいです。最近業務で教えていただきました。
キャッチコピーも素敵で良いですね。縦書きもグッドで素晴らしいポスターです…!

サヨナラサイキックオーケストラ

よく海外ポスターのタイポグラフィでこういったカタチをよく見ますが、実際日本語でやろうとするとすごく難しいんですね..
これは一行の文字が全然あってないですが、バランスよくまとまっていて衝撃を受けたポスターです。
文字間もバラバラで大胆な開け方をしてるのにも関わらず、全体として見るとキッチリしてるようにすら見える..。
驚きのバランス感覚です。

日本観光ポスターコンクール 函館

縦書でもええんやで…?と言う事が気付けるポスター。イラストも素敵ですね。
縦書の函館の文字の間に横書きでHAKODATEと入っています。こういう文字の配置もよいなーと気づかせてくれるポスター

BERK KIZILAY 2010

文字を敷き詰めて、文字でマスクするという驚きの手法で作られている、クリエイティブなポスター。
なるほど、この手があったかという発見…!参考になります

淡路はたらくカタチ研究島

淡路はたらくカタチ研究島のポスター
文字の配置もカチッときまっていて読みやすく。縦書や文字の要素の端が揃っていて綺麗なポスター。
そして何より、ポスターの下にまとめられた文字達が本当に良いと思います。目立たせたい文字は白背景に文字でくり抜いたり、工夫が詰まったポスターだと思います。

KOKUYO AIRFORT

文字が入る所を水泡で強調しています!!!商品のコンセプトに合ったナイスな入れ方です。
例えば今回は水泡ですが、空のポスターなら文字のバックに雲を入れても良いですよね。ナイスなアイディアです
ポスターの世界観に合う素材を背景に敷く手法…!

瀬戸内国際芸術祭 2013

英語と日本語を入れなくちゃいけないポスターだったんだと思います。文字量がすごく多いですが、段組をうまく使うことで要素が多いのにスッキリと魅せています。
段組をうまく使うと情報量が多くても、綺麗にまとめることが出来るのですね…!

妄想侍

背景色とは真逆の色で抜く事で、文字自体をこれでもか!というほど目立たせています。
このポスターはインパクトが凄いですね…。綺麗なグラフィックでこのインパクト。なかなか両立するのは難しいものです…。

NIIGATA CHULIP STREET 2014


透明度をうまく使って綺麗にまとめています。
透明度の文字のお陰で、文字の上に文字を配置しても違和感なく配置できています。

ハマボール イアス


文字をナナメに配置することで弾ける感じを出しています。
まさに、はじける夏ですね。目立たせたい文字は背景を敷いたり、文字の大きさを変えたり様々な工夫をなされているポスターです。

鶴ヶ島・未来との対話プロジェクト2013

文字を魅せるテクニックがふんだんに使われたポスター。
透明度や、要素の重なり、色やくり抜き…。文字入れに困ったらこのポスターは必見ですね。

終わりに

いかがでしたでしょうか!文字のレイアウトの参考になるポスター達を厳選して20個ご紹介しました!
また、他にもこんなに良いポスターがあるよ!等ありましたら、ぜひぜひ教えて下さいませ。

【PSD配布】Facebookカバー画像の作り方!作成用PSD置いときますね

こんにちは!YOUKNOWです。
最近業務で企業さんのSNS用画像一式を制作し、Facebookカバー画像作成等、以外と時間がかかってしまったので次回以降再利用できるようにPSDを制作しました。

同じように業務で制作される方がいらっしゃると思うので、PSDをおいておきます。

Facebookカバー画像作成用PSD

Facebookページカバー画像

Facebookプロフィール画像に最適なサイズ

Facebookプロフィール画像は、コンピュータで160×160で表示され、スマートフォンでは140×140で表示されます。
ガラケー(フィーチャーフォン)では50×50で表示されます。

書き出す画像の形式・サイズについて

Facebookのプロフィール画像に最適なサイズは180×180です。
なので、用意したPSDも180×180になっています。
書き出しはpngで行います。

Facebookページのカバー画像について

書き出す画像の形式・サイズについて

851×315ピクセルかつ、100キロバイト未満のjpgだと読み込み時間が短くなります。
しかしロゴやテキストを含む場合は、pngで書き出すと良いです。

Facebookカバー画像 PSDの使い方

Facebookプロフィール画像の書き出し方

facebook profile image
profile image facebook
PSDファイルを開くと、このようになっています。
レイヤーの一番上にある、profileImageレイヤーのアイコンをダブルクリックすると新しいウィンドウが開き、プロフィール画像を編集出来ます。
新しく開いたウィンドウの方でデザインを決め、⌘+ALT+SHIFT+SでWEB用に保存すると、Profile画像が出来上がります。
画像のサイズが180×180かつpng形式である事を確認して下さい。

Facebookカバー画像の書き出し方

facebook レイヤー
Facebookカバー画像のデザインを作ったら、レイヤーのprofileImageとguideを非表示にし、⌘+ALT+SHIFT+SでWEB用に保存してください。
画像サイズが851×315かつjpgもしくはpng形式である事を確認して下さい。

以上で完成です!お疲れ様でした。
既にPSDを作ってあるので、次回はもっと早く作成出来そうです(^^)