2015年5月25日月曜日

セブンカフェ


こんにちは
だんだんと暑くなってきましたね・・・梅雨の時期の蒸し暑さは苦手ですが^_^;
今日は僕がいつも飲んでいるセブンイレブンの珈琲についてです
といってもこのブログはデザイン解析が目的なので、容器やWEBページのデザインについて書きたいと思います


http://www.sej.co.jp/products/sevencafe.html
セブンイレブンの容器のデザインはすごくシンプルです
白い容器の真ん中にブランドロゴとキャッチコピーが中央配列で置かれています。また容器は外側は間伐材を使用したスリーブとなっていて、このスリーブは特殊な柄が印刷されています


このコーヒーメーカーも凄くカッコイイデザインです
このコーヒーメーカーからミルクまで、セブンカフェ全体をプロデュースしたのはユニクロでお馴染みの佐藤可士和さんです
佐藤可士和さんはデザインだけでなく商品展開のプロデュースなど幅広く仕事をされている方です
お恥ずかしい話、僕はこの記事を書くにあたってセブンカフェについて調べるまで佐藤可士和さんがデザインをされたものだったとは全く知りませんでした・・・






ページ構成は複数の画像を縦に配置するタイプです
画像はサイズの違うものもいくつかあるのでやや不揃いですが、一つ一つ分かりやすく作られています
セブンカフェの魅力は他の商品と合わせて珈琲を買うことが出来ることにあると思います
ただセブンカフェのページはもっとその点を押し出してもいいのでは?と思いました
ちょっと短くまとめてしまいましたが今日はここまで
ではまた次回


2015年5月23日土曜日

ノイタミナ


こんにちは!
早速ですが、皆さんは「ノイタミナ」をご存知でしょうか?
「ノイタミナ」とはフジテレビの金曜深夜の特別アニメ枠のことです。Animationを反対から読むとNoitaminaー「ノイタミナ」という企画名になっています
この「ノイタミナ」のアニメのクオリティは非常に素晴らしく、「のだめカンタービレ」や「PSYPHO-PASS」、「あの日見た花の名前を僕らは知らない」など有名作品を数々世に送り出しています
また、この「ノイタミナ」のアニメHPはデザインに非常に力の入っていることとしても知られていて、今日はその「ノイタミナ」のアニメ作品のHPについていくつか紹介していきたいと思います


http://psycho-pass.com
まずは「PSYPCHO-PASS」より
全体的に、「PSYPCHO-PASS」の世界でよく見られる縁を青緑の線で囲っているのが非常に印象的です。また、トップページに入る前や背景にアニメーションが用意されていたり、カーソルを動かすことで独自のアイコンが動くようになっていたりと「魅せる工夫」に溢れたサイトとなっています
反面、色んなところがやたらめったらに変化するので「騒がしい」と感じる部分もありまうすが、作品が好きで堪らない「ファン」に向けてはその世界観を体感できる非常に素晴らしいHPでしょう


http://terror-in-tokyo.com
次に「残響のテロル」
先に紹介した「PSYPCHO-PASS」と比べるととてもシンプルなページとなっています
注目したいのは画像と文字のレイアウト
特に、メインビジュアルはいくつも用意されていて左下の数字の部分をクリックすることで切り替えることができます
また文字組みもとてもカッコよく惹かれてしまいます。情報が多くなるにつれてごちゃごちゃさせてしまうか、シンプルにしすぎてしまうのどちらかに陥ってしまいそうですが、テロルでは赤黒白の三色をメインに構成することで全体的なまとまりを作っているように感じます
画像と文字のレイアウトに非常に気を使ったHPでありとても印象的なHPでした


最後に紹介するのは「四月は君の嘘」
HPを開くとタイトル文字と共に舞い降りてくる桜ー
このサイトはスクロールに合わせて背景画像も一緒になって動くようになっています。更に、驚くべきことにこれがスマートフォンでも同じように動くように作られているのがすごいと思いました!
余談ですが、僕はこのサイトに来ただけで泣きそうになるくらい「四月は君の嘘」は思い入れの強い作品だったりします。。。


http://project-itoh.com
あと、最後に「虐殺器官」「harmony」で名を馳せた伊藤計劃の作品をアニメ映画化する企画、「Project Itoh」のページも秀逸なので気になった方は是非!
ではまた次回

2015年5月22日金曜日

Lightroom始めました



木曜日の授業終わり、クラスメイトのMさんとI氏と一緒に前の記事で紹介した「DIXANS(ダンディゾン)」に行った時に撮影した画像です
僕は時々喫茶店にカメラを持ち込んで撮影しています。普段は「jpeg」という拡張子で撮影してそのままなのですが、今回はLightroomというadobeのソフトで編集してみたかったので「raw」で撮影しました
「raw」とはその意味の通り生のデータのことです。カメラで撮影した画像は「jpeg」として保存される際に自動的に劣化して「現像」されるのですが、「raw」ではこの現像の作業前の劣化していない元のままのデータとして扱うことができます

つまり「raw」で撮影するメリットは現像される前のデータを自分好みで編集して現像することができるため、一度「jpeg」で現像した画像をPhotoshopなどの編集ソフトで弄った時より劣化を小さくして出すことが出来るのです



比較です。現像の際に意識したことは上の画像に書いてあるものですが、専門性の高いソフトであったために改めて勉強する必要を感じました
実際触ってみて結構時間が掛かってしまいましたが、「シャープ」や「輝度」など色々と発見できたことも多かったので非常に有意義だったと思います
ではまた次回^^

2015年5月21日木曜日

19歳

おはようございます
昨夜は雨が凄かったですね・・・僕の家の近くでは雷が落ちて物凄く恐ろしい音が響いていました。。
そうそう学校が始まって一ヶ月弱、ようやく慣れてきたように思えてきたこの頃
そして、昨日5月20日19歳の誕生日を迎えました^^
こう何の感慨もなく歳をとってしまうときっと20、30はあっという間にきてしまうんだろうなぁと


完全に余談ですが、ここ数年の僕の家の誕生日ケーキは一点モノでそれぞれが好きなものを選ぶスタイルです。写真ボケちゃってますが。。。とても美味しかったです
ではこれにて週3更新のノルマは達成!・・・週に3回書くとなると文面の量にバラツキが出てしまうのもやむなしですが、少しずつ記事の質は上がっていく予定(何を根拠に)ですので宜しくお願いします!
ではでは

2015年5月15日金曜日

徹夜明け・・・

アイデアワークの課題が終わらず、徹夜してしまいました。。。
悪戦苦闘を繰り広げましたがなんとか無事提出を果たすことが出来一安心。これで安心して土日を過ごすことができそうです^^



今日のAI&PSの授業で製作しました
データの提出が僕が一番乗りだったため最初に刷ってもらいました。その際、ミスを二つほどしてしまいました・・・
一つ目は提出の際、ファイルではなくaiファイルだけをUSBに入れたこと。これをするとaiファイル内で使用したpsdデータの画像が読み込めないので、二つをきちんと納めたファイルをUSBに納めて提出する必要がありました
そして二つ目、印刷された用紙をトンボで切る際、外側のトンボで切り落としてしまったこと。これは内側のトンボがA4サイズに設定されたものだったのでそこで切るべきでした。。。
また切り落とすのもNGで、これは上下左右両端をきちんとトンボに沿って切るために内側のトンボから先で切り落としてはいけませんでした
これらには今後注意していきたいと思います。

また、画像の桜の写真は3月中目黒の目黒川桜祭りで僕が撮影したものなのですが、よく見ると左中央の花びらが緑になってしまっています。。。
これをどうにか出来ないか宮部先生にお聞きしたところ、PSでどのように修正を行うか教えて頂きましたので後で時間ができたら行ってアップしたいと思います^^

さてさて、ここからは今日のweb解析を進めていきたいと思います!

本日のサイトはコチラ(http://www.cafe-master.com
東京のカフェの案内サイト、「cafe-Master」さんです!!

cafe-Masterさんは駅や路線、席やメニューなど様々な条件から理想のcafeを探すことができるサイトです
TOP画面に注目すると、ヘッダーの項目は6個でマジックナンバー7の法則に則っている事が分かります。


右上と左上を比較してみると、別のリンクページにつながる項目は大きさ・色で統一がなされていないことが分かります
次に、このサイトは色々と要素が多すぎてごちゃごちゃしているように感じます。特に上のバーの検索ボックスは無い方がすっきりして感じると思います


試しに吉祥寺駅を選択してみたところ、このような画面が表示されました
一目でお店の雰囲気が分かる写真が並んでるのはすごく良いと思います!しかし、それ以上の情報がなく例えばエスプレッソを飲めるお店を探している時、一つ一つクリックして調べなくてはならない。これはやや不便です。。。



僕のよく行く「AB cafe」をクリックしてみました
欲しい情報が綺麗にまとめられていると思います。驚いたのが、wi-fiを設備しているかまで分かることが出来ること。wi-fiの設備はお店によってマチマチで足を運ぶまでわからなかったりするのでこれは便利ですね!
下のギャラリーからお店の外見や内側、メニューの写真を見ることができます
管理人さんの事細かなコメントと合わせると、どのようなお店なのか一目瞭然だと思います

まとめると、cafe-Masterはユーザーインターフェイスの配慮を徹底したwebサイトとは言えないが、求める条件のお店を探すことができまたより良く知ることができるwebサイトです!

僕の今後のカフェ巡りにも是非活用させていただきたいと思います(結局それかよw)
今日はここまでです。ではでは良い週末を^^

2015年5月14日木曜日

こんにちは



当ブログにご足労頂いた皆様へ、はじめまして
管理人のJNPIです
水道橋から徒歩5分、コンビニと喫茶店が乱立する街の専門学校でデザインの勉強をしています
趣味は読書とカフェ巡り
1日に4杯のコーヒーが欠かせないカフェイン中毒者でしたが親に怒られて減量、もとい減カフェ中です^^;
なので今はただ浴びるようにコーヒーを摂取するのではなく、如何にして良質なカフェインを摂取するのか?を考えてカフェライフを充実させることを目的に日々を暮らしております
では早速・・・




本日のカフェ紹介です^^
私たちの西校舎の裏手の通りにある「DIXANS(ダンディゾン)」
間接照明によるほの暗い雰囲気を楽しみながら、お洒落なケーキと美味しいエスプレッソの頂けるお店
心優しくイケメンな店員さんと色々とお話させて頂く中、"美味しいエスプレッソ"という話題の中でダンディゾンと全く関係のないお店を紹介いただき(お店の宣伝しなくて大丈夫なんですか。。。笑)後にしました
学校終わりにまた寄りたいです♩

はてさて、開幕早々当ブログの目的について見誤ってないか?との疑念が生じますが・・・
趣味の話って楽しいですね^^;
話を戻して、当ブログでは主にICの授業を担当されているカリスマ先生のご指示の元、あらゆるwebサイトのデザイン解析を行っていきたいと思います
でもデザイン解析ってどうすれば正解なんだろう?
私の解析が他の人から見てズレていた場合、これが今最も恐れることです・・・
ここは皆様からご意見を頂きたくお願い申し上げますm(_ _)m



http://www.sony.co.jp

記念すべき第一回は天下の大企業SONY JAPANです
SONYと言えば、ウォークマンにPS4にαシリーズ
どの分野から見ても常に一流品を世の中に出す日本屈指の大企業!
そんな大企業を前にしてそのwebサイトを解析しようとしているわけで。。。
うぅ・・・消される恐れを物ともせず頑張ります( ;´Д`)

このサイトをパッとみた印象について
非常にシンプルかつ見やすくまとめられています
デザインの四原則の視点から見ていくことにしますと、まず近接についてですがこれは完璧だと思います


次に整列ですが、上の画像を参照して頂くと記事が左右でほぼ一定の幅を取っているのが分かります
反面、一覧などの小さい項目はページのシンプルさも相まってやや突発気味であるように感じます。ここは赤字の「製品・サービスに関するお知らせ」から一覧に飛べるようにすることで改善できるかと

ではコンテラストはどうでしょう?
SONY JAPANのページではリンク付きの項目は青文字、強調したい項目やお知らせは赤字になっています
また背景色に注目すると項目毎に背景の色が変更されているため、どっちの記事なのかがとても分かりやすいです
最後に反復について。一見して全く同じモノを活用している部分は見受けられませんが、シンプルなスタイルで統一されている中その調和を乱さないように配慮がなされているかと思います。


また、ヘッダーに目を向けると数は6つになっていて、「マジックナンバー7」の法則に則しています
※マジックナンバー7とは?
1956年に心理学者のジョージ・ミラーさんが発表されたもので、
人間が短期的に記憶できるかたまりの数を指すそうです。。
無意識のうちに短期記憶の中に記憶できる数が5~9もしくは、3~5つのかたまりだそうです(転載:http://www.designwalker.com/2007/02/magic-number.html

以上の視点からこのサイトはユーザーインターフェイスに配慮された使いやすいWebサイトです

また、このサイトがどの年齢層を狙って作られたサイトなのかを考えると・・・
SONYのヒット商品と言えばウォークマンとPS。この2つがヒットした当時の世代、40~50代と考えSONY JAPANのページを見直してみることにします。

SONY JAPANのページは前述した通り非常にシンプルで使いやすくまとまっています。これは若い層を狙ったポップなページとはかけ離れていて、スマートさや高級感を感じられるものかと思います。また、SONYのネームバリューを考えるとブランドのイメージに即したデザインになると考えられます。よってSONYのページは全体的に年齢の高い層をターゲットにしておると思います

以上です
初めてのデザイン解析でかなり迷った部分が多かったですが数をこなして慣れつつ上達していきたいなぁと^^;
ではまた次回!
今日は似顔絵終わらせないと寝れない。。。>_<