考具箱

考具箱

あるWebデザイナーの引き出し

Amebaでブログを始めよう!

これからどこにブログを書いていくか模索中。はてなにしようかと思ったけど、キーワードリンクの機能ってまだあったのか。消せるかと思ったけど有料ユーザーだけっぽい。

エディターのUIに関してはアメブロも全然負けてない。さすがっす。自分が入社した時とはだいぶ変わってて、自分と同じ新卒のデザイナーたちが頑張ったんだなと思う。

 

アメブロってメールからの投稿ってできるんだろうか?だったらIFTTTとか使ってたくさんのブログに一気に記事を拡散できそう。

ちょっと調べてみるけどとりあえずテスト。あとアメブロの場合は個人のブログにどれだけ広告が入ってくるのかもきになる。

今の気分はなんかブログ書くと.moneyもらえるらしいので書きたくなりました。
でもなんか有益なこと書いたほうが星がたくさんもらえそう・・・。

どうでもいいですが、この前内田裕也に会いました。
5人くらいでラーメン屋にいました。見た目で一瞬でわかりました。

完。


 
今の気分は?【投稿でドットマネーがもらえる!】 ブログネタ:今の気分は?【投稿でドットマネーがもらえる!】 参加中
本文はここから



ブログでドットマネーを稼ぐ
続いて、清涼飲料商品サイト!

1.リプトン http://www.lipton.jp/

$考具箱
バランスがきれいなサイトです。それでもリンクに下線がついてたりして分かりやすさもあっていいです。


2.なっちゃん http://www.suntory.co.jp/softdrink/natchan/

$考具箱
サントリーの企業ページ内ですがメニュー項目と「|」の間の取り方とか参考になります。


3.伊右衛門 http://www.suntory.co.jp/softdrink/iyemon/

$考具箱
ドロップシャドウはやはり基本なのでしょうね。明朝体で横書きというのがやはり難しそうです。


4.BOSS http://www.suntory.co.jp/softdrink/boss/

$考具箱
BOSSだけでもかなりの種類があるので、たくさんの情報の見せ方として勉強になります。メインイメージでピックアップした商品を回してみせるところなど。たくさんコンテンツがありますが、すべて同じフォーマットで項目を載せていてみやすいです。


5.ペプシ http://www.pepsi.co.jp/

$考具箱
左上のメニューがきれいだと思いました。見せたい物を大きく、それ以外は小さめで表示しているところもいいと思いました。



6.コカコーラ http://www.coke-musicunlimited.jp/

$考具箱
コカコーラはキャンペーンサイトのようになっています。商品と連動したWeb企画のコンテンツがまずある感じです。多くのバナーがありますが、やはり大きさにメリハリをつけて優先を決めている気がします。


7.コカコーラゼロ http://www.cocacola.jp/zero/

$考具箱
構成が奇麗なサイトだと思いました。タレントの力も大きいですが、画像化した文字の太さとテキストのバランスが違和感無く、上手だと思いました。



8.ファンタ http://c.cocacola.co.jp/fanta/

$考具箱
世界観がかなりでています。メニューなどのボタンも大きく、押しやすくて好きです。メインイメージまでの背景でいったん切れるところなど、普通のWebサイトのワイヤーフレームを残しつつも、自由に表現していると思います。


9.スプライト http://c.cocacola.co.jp/sprite/

$考具箱
パララックスでした。何と言ってもメインイメージのインパクトがすごく、それを十二分に活かした構成になっていると思います。YouTubeの企画も好きです。



10.プレミアムポルツ http://www.suntory.co.jp/beer/premium/

$考具箱
最後にサントリーに戻ってビールを。ドロップシャドウがなく、フラットなページ構成です。しかも明朝体ですが、シンプルで奇麗にまとまっていると思います。参考になりそうなサイトです。


以上です!次はスマホサイトに行きたいなーと思ってます。また次回!
日本の飲料系メーカーサイトを中心に集めました。

1.サントリー http://www.suntory.co.jp/

$考具箱
グラフィックデザインと言えば昔からサントリーです。上からロゴ、グローバルビュー、メインイメージ、そして商品メニューと続くのが王道で見やすいです。微妙なグラデーション、ドロップシャドウなど参考になります。また、一部レスポンシブデザインになっていて、画面右のソーシャルメニューはウィンドウサイズを縮めるとページの一部になります。そのあたりも含め、デザイナーがワイヤーフレームからきちんと考えたんだなと思いました。



2.日本コカコーラ http://www.cocacola.co.jp/

$考具箱
自販機でサントリーと双璧をなすコカコーラ(名古屋ではそうでした)。確か今でも世界で一番ブランドに価値がある会社でした。サイトは、商品情報よりも会社情報を多く載せている印象です。



3.大塚製薬 http://www.otsuka.co.jp/

$考具箱
今回調べた中で一番ぶっとんでたのが大塚製薬でした。そもそも飲料水メーカーではないのですが・・・ポカリスエット、オロナミンCといえば大塚製薬です。コーポレートサイトでこれだけ画像を使って世界観を作っている会社は珍しいと思います。会社の情報なのに見ていて楽しくなるサイトでした。



4. JTビバレッジ http://www.jti.co.jp/softdrink/index.html?js=/softdrink/index.html

$考具箱
JTの飲料事業のページです。空白が美しくシンプルなページです。



5.カゴメ http://www.kagome.co.jp/

$考具箱
ここも余白が多きく、清潔感があるサイトだと思います。メインイメージの外のドットの背景部分がナチュラルでありつつ目立ってて参考になります。個人的には一番好きなサイトでした。



6.サッポロビール http://www.sapporobeer.jp/

$考具箱
メインイメージの出し方が特徴的なサイトでした。


7.アサヒ飲料 http://www.asahiinryo.co.jp/

$考具箱
メインイメージ、グローバルナビに大きなドロップシャドウを使い、それ以外の項目では小さなシャドウを使い分けている部分が勉強になりました。


8.伊藤園 http://www.itoen.co.jp/

$考具箱
ロゴが筆で書いた漢字のような和風テイストで、サイトを作るのが難しそうだと思いました。



9.キリンビバレッジ http://www.beverage.co.jp/

$考具箱
左寄せサイトは今珍しい気がします。メインイメージが動画になっていてテレビCMのようなイメージを描きました。



10.ヤクルト http://www.yakult.co.jp/

$考具箱
ページトップにコーポレートカラーを入れることがよくありますが、このサイトも細いラインが入っています。実際作っていると、あのラインがあることで画面の境界が分かり「Webページ感」が出るのですが、今回もたくさんのサイトがそうなっていて勉強になりました。またヤクルトに関してはグローバルナビの下の部分にも1px程度の赤いラインが入っていてこだわりを感じました。



以上です。
自動車メーカーのコーポレートサイトに続き、自動車の商品ページを巡回し、よさそうなものをピックアップしました。商品ページはコーポレートサイトよりも広告的な要素も強く、奇麗な印象でした。

1.プリウス http://toyota.jp/prius/
$考具箱
コーポレートサイトは冴えない感じでしたが、商品のページは非常に丁寧です。ユーザーが本当に必要な情報が素直に最初に出てくるところに好感が持てます。


2.リーフ http://ev.nissan.co.jp/LEAF/
$考具箱
情報が下にのびるサイトが多い中、リーフは情報ごとにページで分けているため見やすいように感じました。



3.スマート http://www.smart-j.com/
$考具箱
シンプルで分かりやすい構成だと思いました。まさにスマート。


4.インサイト http://www.honda.co.jp/INSIGHT/
$考具箱
このサイトも体系化されたサイトで見やすいと思いました。


5.フォーカス http://www.ford.co.jp/cars/new-focus
$考具箱
写真とその中の文字でほぼ雰囲気が決まっていると思います。

6.フィアット500 オソレミオ http://www.fiat-auto.co.jp/product/o_sole_mio/
限定車ということで、キャンペーンサイトのような意味もあるかもしれませんが、やはりフィアットはグラフィックとしての作り込みが非常に凝っているという印象をうけました。

7.フォレスタ http://www.subaru.jp/forester/forester/
パララックスを使ったサイトです。ページが長いですがわくわく感を出ているように思います。

8.ステップワゴン http://www.honda.co.jp/STEPWGN/
縦スクロールが長いページは間の取り方が最後まで一貫していたり、メリハリをつけたりしていて見やすくする工夫があるなと思いました。

9.アルト http://www.s-alto.jp/miryoku/#/alto
女性的な雰囲気が出ていると思います。車の宣伝を車のある生活という切り口から責めるサイトです。

10.フリーランダー http://www.landrover.com/jp/ja/lr/freelander-2/
ヘッダーの空きなど、余裕のあるスペースが画面を見やすくしていると感じました。情報も必要最小限が載っているだけで見やすく感じました。



こんな感じでした!やっぱりフィアットのサイトは好きでした。
こんにちは!Webデザイン研修中の内田です!

大学では広く浅くデザインに手を出してきたのですが、何故かWebデザインはあまり手をだしてなかったという事実を会社の方との話で思い知りました。ユーザビリティとか、他のデザインでも意識面で共通する点はあるのですが、とは言えスクリーンの中で構成するという点は特別です。

ということで、Webサイトを見まくって、いいサイトをブログに貼るという作業をしたいと思います。
まずは自動車メーカーのコーポレートサイト編です。なんと言ってもプロモーションに金をかけられるのは自動車です。世界の30社(ブランド)くらいをキャプチャして比べてみました。車の探しやすさ、ブランドイメージ、ページの雰囲気などなどで10個選んでみました。それではどうぞ!


1.フィアット(http://www.fiat-auto.co.jp/)

$考具箱
個人的に一番好きなサイトでした!丸みを帯びた線や淡い色使いにフィアット感が出ていると思いました。メイン写真下の"LINE UP"のメニューで、車種の写真を使ったボタンになっているところも非常に分かりやすいです。


2.ホンダ(http://www.honda.co.jp/)

$考具箱
自動車のメーカーでイラストを使っているというのは結構イレギュラーですが、ブランドイメージに合わせてこうなったのでしょう。ご存知の通りホンダはバイクなども作っていますが、大きめのボタンで分かりやすく車かバイクかの導線が作られている部分も好きでした。またメインイメージ下のコンテンツ部分で薄い灰色を使っている部分も参考になりました。


3.ダイハツ(http://www.daihatsu.co.jp/)

$考具箱
車を選ぶ部分のボタンや文字が大きめで、全体の構成もWebサイト的でナチュラルなところが使いやすそうに感じました。グローバルナビの下に関連するメニューがある部分も好きな構成でした。


4.シトロエン(http://www.citroen.jp/)

$考具箱
海外メーカーのサイトは、日本に比べてイメージ写真を強く使う傾向がある気がします。その中でもシトロエンは一枚の写真と少ないメニュー項目でシンプルで見やすく、好感が持てるサイトでした。


5.三菱自動車(http://www.mitsubishi-motors.co.jp/)

$考具箱
イメージ通りまとまっている印象でした。車を探す時にも迷いが少ないように感じました。


6.ルノー(http://www.renault.jp/)

$考具箱
黄色がブランドカラーの自動車メーカーは少ないので、黄色を見た瞬間ルノー感が出ている気がします。空白のとりかた、車種の写真をつかったメニューなどが参考になりました。


7.いすず(http://www.isuzu.co.jp/)

$考具箱
ほぼBtoB用のサイトになると思います。必要な情報が見やすい構成で伝えられていると思いました。

8.マツダ(http://www.mazda.co.jp/)

$考具箱
マツダのスタイリッシュさ、軽快さが出ていると思いました。文字が詰まっている気もしますが、見やすいサイトです。


9.スズキ(http://www.suzuki.co.jp/)

$考具箱
味気ないサイトに見えますが、トップビューで全ての情報が見渡せ、無駄な装飾も無く見やすいと思いました。


10.クライスラー(http://www.chrysler.co.jp/)

$考具箱
見やすく、写真の中の文字の空間の取り方が上品でした。ヘッダーのロゴが見づらいかも?


以上です!ほんとは甲乙付け難いいいサイトがたくさんあるのですが、似たサイトを削ったりしてこうなりました。以前Webのブランディングが最も成功している起業としてトヨタ自動車が選ばれていた記憶があるのですが、コーポレートサイトに関しては?でした。

こうして見ると、商品ページへの導線がしっかりできていれば、重要なのはブランドイメージを出せるかどうかがコーポレートサイトに求められているところなのかなと思いました。

次回は車の商品ページを探っていきたいと思います。


<今回見た自動車メーカー一覧>
トヨタ自動車
レクサス
日産自動車
ホンダ
スバル
スズキ
三菱自動車
マツダ
ダイハツ
イスズ
日野自動車
フォード
GM
クライスラー
フィアット
アルファロメオ
フェラーリ
マセラティ
ランボルギーニ
ポルシェ
フォルクスワーゲン
メルセデスベンツ
スマート
BMW
ルノー
シトロエン
ロールスロイス
ベントレー
ジャガー
ミニ
プジョー
ランドローバー
アウディ
会社に入って2週間が経ちました。全体研修という、ビジネスコース(営業、総合職など)とテクノロジーコース(エンジニアとデザイナー)合同の研修が終わりました。

役員全員からの話、現場の社員に付いて一日過ごす弟子入り、2泊3日の宿泊研修、様々なグループワーク等々、盛り沢山のコンテンツを全力で駆け抜ける充実した研修でした。この研修の中で得た学びを大きく分けると以下の二つになります。

・モチベーション

・チームワーク

です。

モチベーションに関しては最後の社長と副社長の話がかなり大きいです。うちの会社がインターネット黎明期の中で産業と共にいかに成長してきたか、また、御自身がいかに成長してきたかという話は、自分もそうなりたいという憧れを抱かされました。ただの美談ではなくリアリティのある泥臭い(?)話で、研修という恵まれたレールを歩む自分にとっては、こんなんじゃダメなんじゃないかという気にさせられました。

っていうか、起業したくなりました。もともとしたかったんですが、最近はデザイナーという立場で勉強してからにしようとか、むしろデザイナーを極めようかとも思ったりで迷ってました。「何の事業をやりたいか」がまだはっきりと決まってなくて先延ばしにしてた感もあります。

でも、成功してる起業家がみな25、26歳までに起業しているので、焦る気持ちもありました。もう次の5月で25です。じゃあいつやるの?・・・(笑) とりあえず、事業を考えつつ、今ある仕事で目立つ成果を出したいと思います。その辺大学院卒は年齢的な部分できついです。(院に進んだのはよかったです)


チームワークについては、最初の自分の強みを設定するという話から、すべてのグループワーク、ランチにいたるまで一貫して意識させられました。そして、それが最も大切だと自分自身が思っていたこともあって、アンテナに引っかかりやすかったです。

まず自分の立ち位置、強みを認識すること。これはチームの中で最大限の結果を出すということだけでなく、目立っている人たちを見て変に劣等感を抱いたりした時に自分のポジションはそこじゃないと信じられると動きやすくなるということもあります。

一方で、「自分のやりたいことをやりたい」という時には、必然的に仲間を集めてリーダーシップをとる必要があるので、グループワークや飲みに行ったりして同期を知るという過程はとても重要だったなと感じています。実際にはまだまだ話せてない人もいてもったいない気もしますが、類は友を呼ぶとも思っていて、気になる人は結構できました。まだまだ意識して生活していきたいと思います。

強みを見つけ出す「ストレングスファインダー」に続く新刊、「ストレングスリーダーシップ」という本も今日買ってきたので読んでるところです。


来週からは技術研修ですが、あえてデザインの方をとりました。ユーザーに最も近く、答えがないデザインを伸ばすことこそが、優秀なプロダクトを作る要だと思ってます。正直最近コードばっかり書いてたのでなまってそうですが出来るだけ早く終わらせて現場に行きたいと思います。
全ての研修の一番最後のイベントとして、社長のお話を聞きました。

「大志」について話してほしいという人事からのリクエストに応え、話してくれました。

「若者は大志を抱けることが強み」

社会を知らないからこそ無謀な挑戦をしていけるし、それにがむしゃらにがんばる。社長がもし30歳のときに大志を抱いたら同じようなことはできなかっただろうというお話をされていました。

おそらく、社外の人は社長は熱血系で話し方も熱いんだと思っているかもしれないですが、実際にはちょっと違うと思います。会議のときは割と小さな声で核心をさくっと刺してくるの感じがします。

自分がこの会社に入って驚いたことの一つは、優秀な社員はみんな社長のことを敬愛しているということです。本当にみんな社長のことを尊敬しているし、たまに愛を持っていじってる人もいるくらいです。

自分の中にある一般的な「社長」のイメージはあまり社員に好かれているイメージはなかったので、こういう社長像を見るととても不思議な感じがします。

でもそれも当たり前で、一人の力でそんなに大きな会社にできる訳ではなく、たくさんの人望があってこそ会社を大きくできたのだと思います。そこを、僕も見習いたいなと思いました。