title_img12

こんな時間なのでおいしそうなアイコンを集めてみた

どうもどうも。
あー…ブログ更新してないなぁ…なんて思ってたらあっという間に7日間過ぎてました。
今日は会社がお休みなので、みんながおなかすく時間帯にこんなアイコン達をご紹介。

ライブド〇時代はアプリのデザインやってたなぁ…なんて事を思い出しつつ集めてみました。
ほんと良い経験させていただきました。
もちろんみんな大好きをdribbble.comからでございます。
(さらに…)

title_img11

20130910_今日の気になるデザイン

どうもどうも。
今日はみんな大好きフラットデザインのUIをdribbble.comから集めてみましたよ。
このサイトに乗ってるデザインはホントすばらしいですね。恐ろしい。
 

 
20130910_01
http://dribbble.com/shots/864910-Ui-Kit/attachments/92273
フラットデザインを考えてると、シャドウをどう入れるか…いや入れないべきかで悩んでしまうのですよ。
このデザインはシャドウも入ってるのですが、違和感ないっすねー。すごい。
あれ?ボタンにグラデが入って…る?
でも、こんな感じの微妙なグラデ(僕はブラシでやっちゃいますけど)の傾向って、
フラットデザインが騒がれる前からチョイチョイ出てきてましたよね。
いきなりフラットデザインになったのではなくて、やはり兆候はあったのかなぁなんて思っておりますです。はい。
 

 
20130910_02
http://dribbble.com/shots/829195-Slate/attachments/86422
これまた素敵なデザイン。
角丸使う事で印象が優しくなりますね。
なんかフラットデザイン=シャドウ使っちゃダメと勝手に思っていたのですが、
そんなことないなぁと。勉強になります。
 

 
20130910_03
http://dribbble.com/shots/974693-Easy-Note/attachments/112631
今日読んだ記事(gigazine)に、「ウェブの未来を担う次のデザインはカードにあり」ってのがありました。
まぁ、色や形は手段であって目的では無いのですべてには当てはまらないと思いますが
このUIがドンピシャだと思えるターゲットには使っていきたいですね。
カード型のUIは色が難しそうだなぁ。。。
 

 
20130910_04
http://dribbble.com/shots/943079-Webapp-Dashboard/attachments/106141
弊社、サーバー屋なのでコントロールパネルのデザインとかもやるわけですよ。
こんな感じのデザイン出してOKもらったら楽しいだろうなぁ…
グラフ部分のデザインってアイディア勝負ですね。
参考になります。
 

 
20130910_05
http://dribbble.com/shots/1091105-Holiday-Selector/attachments/136390
個人的に透過のデザインが好きなので、これはもう大好物ですね。
すごいな。文字の行間と余白を計りたくなるぐらい参考にしたいです。
綺麗だなぁ。。。。。(白目)
 

 
と、ここまで書いててハッと気づいたのですが
全部似てきますね。フラットデザイン…
や、わたくしのようなクソWebデザイナーごときが発言してはいけなかったんです…寝ます…

ではではーーー

title_img10

20130909_今日の気になるデザイン

どうもどうも。
なんでこんな誰得デザインを紹介してるのか自分でもわかりませんが、
もう意地です。続けます。続けますとも。
 

 
20130909_01
http://www.theqcamera.com/
メインビジュアルにどかーんと動画。
おしゃれな完全防水のカメラですか。
使って欲しい、もしくは使うであろうシーンをサイトに載せるのはやはり大切ですね。
サポートサイトにこういうの活かせないかしら。
 

 
20130909_02
http://www.noiretrenoir.com/EN/
これは良い!!というか色が好き。
なんかサイトの構造が良いとかじゃないので全然参考にはなりませんが。。
色参考にしたいっす。
 

 
20130909_03
http://www.bus-project.info/
また背景動画。
これは流行るな。(すでに流行ってるのかな?)
弊社のサイトの背景が動画になったら、あいつやっちまったなと思ってください…

 

 

本読まないとなー
読んだ本をブログで紹介…
ちゃんと理解しないと書けないすね。。あ、良い勉強になるかな。

ではではー

title_img09

20130905_今日の気になるデザイン

どうもどうも。
予約投稿って楽ですねぇ。予約できる投稿がないですけども。
今日の気になるデザインですーー。
 

 
20130905_01
http://wagerfield.github.io/parallax/
これすごい!
仕事に使えないかなぁと思ったけど全然思いつかないですね!
ちょっと勉強してみよう。
 

 
20130905_02
http://tablet.fubiz.net/
サイトの読み込み遅くてイライラするけど、見て納得。
これは重くなるわってぐらいリッチなコンテンツですね。
背景に動画っていつかやってみたいんだよなぁ。
 

 
20130905_03
http://rwstudios.be/baby/
なんだなんだ。
背景に動画って流行ってるのか?いや、これからなのか。
どんどんwebデザイナーに求められるスキルが増えてる気がするのは自分だけでしょうか…(白目)
 

 

このブログはじめてデザインのインプットは増えたのですが、
ディレクターとしてのインプットが…
(本は買ってるのですが全然読めてない…)
日々勉強ですね。

ではではー

title_img09

エイプリルフールサイトを作った時のお話

41_01

どうもどうも
今日は4/1に制作したエイプリルフールサイトについて書いてみようかなと。
書き終わって、改めて読み直してみたのですが文章ヘタだなー
読みづらいと思いますがお付き合いいただければ…なにとぞ…なにとぞ…
 

 

「エイプリルフールのサイトなんて別にやらなくてもいいじゃん」という考えの会社様も多いとは思いますが、アイディア次第では低予算でプロモーションできる良い機会だと思うんですよね。

コレを読んでくれたインハウスのデザイナーさんが、「こんなクソWebデザイナーでも出来るんだからウチも来年やってみようかなぁ」と思ってくれれば幸いでございますよ。
 

 

それは静かに始まった。

2012年の11、12月ぐらいだったと思うのですが…
そろそろエイプリルフールサイト考えないとねーみたいなミーティングをしまして。
こんな感じで簡単な役割分担が決まりました。

企画…広報
制作…わたくしと敏腕コーダー様

エイプリルフールサイトと言っても企画は広報が考えてくれるし、制作は多くて8ページくらいだろうと。
仕事の合間にチョイチョイやれば終わるなぁーなんてこの時は考えておりました。

「流行のパララックスとかやっちゃいますか!」なんてキャッキャしながら、またいつもの業務へ戻っていったのです。
 

 

忘れていたエイプリルフールサイト。

1月の中旬くらいでしょうか。
なぜか、2月・3月は案件が大小多く、こりゃスケジュールたてないと破綻するわーーと思い自分と超絶コーダー様のタスクリストを全部洗い出してみると…

(仮) エ イ プ リ ル フ ー ル サ イ ト 制 作

この1行を見つけて心臓が「キュッ」と痛くなりました。
急いで企画を担当してくれている広報のメンバーに確認すると、大体のコンテンツ案は出来ているとの事。さすがや…

泣きながら笑顔でスケジュール表にエイプリルフールサイトを追加しました。

スクリーンショット 2013-08-23 19.47.29
↑当時のタスク
 

 

さくらインターネットのエイプリルフールサイトと言えば。

あ、社名が。
いつもお世話になっております。
さくらインターネットのサエキです。

サーバ業界だけかもしれませんが、弊社のエイプリルフールサイトは有名でして。
わたくしも入社する前は「さくら今年も激しいな…」と楽しみにしていたものです。
まさか自分が作ることになるとは。
4baka_01
↑2010年のエイプリルフール

4baka_02
↑2012年のエイプリルフール

過去のエイプリルフールサイトを見ていただければおわかりいただけると思うのですが、
もちろん今回もこんな感じの路線でいくぞと。

「とある科学の超電磁砲<レールガン>」とのコラボが更に進みまして、弊社の石狩データセンターを舞台に「とある科学の超電磁砲<レールガン>」のキャラクター達が各々の能力を活かして働く…という設定でサイトの企画が立ち上がっておりました。

わ、なんか読み物コンテンツ(ラノベ?)まである!とか言いながら、この企画をどう見せればお客様は喜んでくれるのか…と悶々と構成を考え始めました。
 

 

企画を活かすサイト構成を考える。

「とある科学の超電磁砲<レールガン>」とコラボさせていただくので、それだけでインパクトは期待できるなぁと。
あとは、どれだけイラストを邪魔せずに企画に添ったサイトを設計できるかがだなーと、以下の3点をベースに構成を考えていきました。
 

 
・パッと見てすぐに理解してもらえるTOPページにしたい
・イラストを最大限活かしたい
・読み物コンテンツを読んでもらうための工夫
 

 
とりあえず、やりたい事をすべて詰め込んだサイト構成を作ってみようと。
パララックスを使ったらイラストが活きるんじゃないかーとか、
ただ縦に動くだけじゃつまらんから横移動させたいーとか、サイト構成というより絵コンテみたいなのを作りまくっておりました。

じゃあこのサイト構成を実現するためには…
と工数を見積り、納期と照らし合わせてみたのですが、僕の体重が50Kgになるのと同じくらい不可能なスケジュールになってしまいました。
通常業務の制作が滞ってしまうのはマズイ。
かといって適当なサイトは作れない…どうしよう…
 

 

最大限の仕様と最低限の仕様を作ってみる。

最大限の仕様というのは、やりたい事をすべて詰め込んだサイト構成。
最低限の仕様は、文字通り最低限必要な情報だけを見せるサイト構成。

今回は最低限の仕様から肉付けする感じで作っていきました。
これを足すと工数が大きく変わるからダメだーとか、
これは外せない…とかとか。

インハウスの醍醐味といいますか、通常業務も大人の事情で常に工数が変化します。
その中で確実に納品できるやり方はこのやり方かなーと。

事実、4月1日にリリースするギリギリまで作り直しておりました。(白目)
 

 

問題発生!

41_02
ワアワア言いながら通常業務をやりつつ、エイプリルフールサイトを進めていたのですが、大きな問題が。
 

 
 イ ラ ス ト が 来 な い … !
 

 
今回の弊社エイプリルフールサイトは、「とある科学の超電磁砲」とのコラボレーションサイト。
つまり、とある科学の〜イラストが来ないと始まらないわけです。

すでにラフイラストでサイトはある程度出来上がってます。
あとはイラスト来たら終わりや!なんて思っていたのですが全然来ない。

最悪、ラフイラストで公開するか…という雰囲気の中、公開2・3日前くらいにようやくイラストが送られてきました。
いやー交渉を続けてくれた企画担当のM先輩とイラストレータ様に感謝です。
 

 

最後の仕様変更

読み物コンテンツ(ラノベ?)のデザインが最後まで「最低限の仕様」のままという状態でした。
どう見せるか一番悩んだコンテンツだったのですが、ここを考えてると制作が終わらないと後回しにしていたんですね。
会話形式で進める感じのお話でして、とりあえず縦長なデザインで作っていたのですが30000px超えておりまして…
もう縦30000pxあっても良いんじゃないか?いや、むしろ新しいよ!クリエイティブ()だよ!なんて本気で思い込んでおりました。(現実から逃げたかった)

そんなときに、我がチームの司令官から「縦が長過ぎます」というご指摘をいただきまして。

ハッと我に返って制作したのがこのページでございます。

41_03

紀伊国屋書店のブックカバーを探して、完全に再現してやると変な方向に注力するもなかなか良い感じのページができました。

いや、あのまま出してたら恐ろしい事になってましたね…
神の声とも思える的確なご指摘でした。

そして完成したサイトがこちら
 

 

終わってみて

webデザインって非常に短命だと思うんです。
サイトリニューアルして、すぐリニューアルの話が出るなんて良くある話です。
なので、あまりデザインに思い入れというか、
「仕事だから」と割り切ってサイト制作をやる事がほとんどでした。

でも、今回関わったエイプリルフールサイト制作は、見てくれた人の反響がすごくて。
 

いいね!:2.096
ツイート:3.849
グーグルのやつ:293
はてぶ:263
 

7、8年制作やってますけど、ここまで反響あるサイト制作初めてでした。
素直に嬉しかったし、最後の最後までブラッシュアップして良かったなぁと。
貴重な経験をさせていただきました。ほんと。
 

 

インハウスでデザインやってると「退屈じゃない?」とよく言われますが、
なかなか刺激的で楽しいものですよ。

もし良かったら来年のエイプリルフールサイト(未定ですがw)を一緒に作ってくれる方を募集してますのでこちらから応募してみてくださいねー(宣伝)

ではでは

title_img07

20130903_今日の気になるデザイン

しまった…
1週間くらい更新できてなかった…で…す…
毎日更新するって難しいですね!(言い訳)
そんなこんなで、今日も「お!」と思ったサイトをご紹介。
 

 

20130829_01
http://www.squarespace.com/stories
デザインテンプレートを売ってるサイトかな?
ユーザーが使う様々なシーンをTOPで見せる感じが非常に良かった。
あと、メニューが右側だったのが気になる。気になる。
どうしてこの配置にしたのだろうか…。気になる。
 

 

20130829_02
http://www.flickr.com/new
フリッカーのサイト。
画像の見せ方がやはりすばらしい。
あとロゴの動きも良いですなぁ。
 

 

20130829_03
http://www.discovershadow.com/
パララックスなんですけど、一番最初の動きは初めてみたなぁ。
いつかやってみたい。
それ以外も、かなりいい感じの動きですね。
ううむ。。すごい。。
 

 

週末に書きためて予約投稿とかできるくらいマメならいいんですけどね。
今週末やって…み…よう…かな…

ではでは!

【追記】
いいねが8つ11個も!!!
みなさまありがとうございます!(涙)