Webデザインの最近のブログ記事

CHEESE STAND

2012年6月4日、渋谷区神山町に店内でつくる出来たてのチーズが食べられるカフェ「SHIBUYA CHEESE STAND」がオープンしました。

このたび、縁があってCHEESE STANDのWebサイトをデザイン&制作させていただきました。

アメリカで販売されている紙パック製ミネラルウォーター「Boxed Water」。環境のためにプラスチック製ではなく紙パック製の容器にすることをコンセプトにしている製品です。

We started with the simple idea of creating a bottled water brand that is kinder to the environment and gives back.
WE FOUND THAT IT SHOULDN'T BE BOTTLED AT ALL BUT INSTEAD, BOXED.

東京メトロの駅構内で配布されているフリーペーパー「メトロミニッツ, metro min.」が、Webマガジンになってリリースされました。

ソーシャルデザインをテーマに、"新しい価値観やアイデアで暮らしを編集する" 都心で働く20代~30代のトウキョー・ビジネスパーソンへ向け、お届け中。

ロンドンの地下鉄路線図から、動物のイラストを探して紹介しているサイト「animals on the underground」。1988年、Paul Middlewickさんが象のイラストを発見したのが起源らしいです。

The animals, created using the tube lines, stations and junctions of the London Underground map were first spotted by Paul Middlewick in 1988. The original animal, the elephant was discovered while Paul was staring at the tube map during his daily journey home from work.

3月11日みんなで日本1周を走ろう!・NIKE「RUN TOGETHER」

ナイキジャパンは被災地支援のための取り組み「RUN TOGETHER」を2012年3月11日(日)午前0時より実施することを発表、あわせて特設サイトがオープンしました。

みんなで走ろう。日本を一周。およそ、32,000km。1日で。きみが3月11日にどこにいても、Nike+があれば参加できる。
RUN WITH ME. RUN WITH US. RUN WITH JAPAN.

最近、統計調査や企業のプレスリリースなど、たくさんの数字や複雑なメッセージを扱う情報を、グラフィカルに表現した「インフォグラフィックス」という表現手法を多く見かけるようになりました。

インフォグラフィックスとはインフォメーションとグラフィックスをかけあわせた造語で、 <見えにくい情報>を<わかりやすい形>にするグラフィックデザイン。 言葉では伝わりにくいものでも、絵や図で説明されると簡単に理解できることがたくさんあります。

そんなインフォグラフィックスを作るうえで参考になるWebサイト、インフォグラフィックスの事例を紹介していうWebサイトを17ほどピックアップしてみました。

世界最大級の旅のクチコミサイト・トリップアドバイザーが提供する「tripgraphics」。旅のお役立ち情報を、インフォグラフィックスで紹介しています。

旅に関するさまざまな情報をインフォグラフィックスで表現した「tripgraphics(トリップグラフィックス)」。世界最大の旅行口コミサイト「トリップアドバイザー」が提案する、旅を楽しむあなたのための新しい情報源です。

世界中のWebデザインを各国のデザイナーが採点し、"SITE of the DAY"を毎日紹介しているwebデザインのまとめサイト「Awwwards」を紹介します。

Awwwards are the awards that recognize and promote the talent and effort of the best developers, designers and web agencies in the world.

Webデザインが好きな人のためのソーシャルブックマークサービス「minspi」を紹介します。

minspiはwebデザインのソーシャルブックマーク&ギャラリーサイトです。
URL入力 or ブックマークレットで簡単にデザインをキャプチャして登録・管理できます。

昨日紹介したFireworks Maniaを運営しているYUKIさんのパターン配布サイト「シンプルパターン研究所」。商用でも使えるパターンやテクスチャを無料で配布しています。

Fireworks好きがお届けするTipsサイト「Fireworks Mania」

2010年11月21日、福岡で働く会社員WEBデザイナー・YUKIさんによるTipsサイト「Fireworks Mania」がスタートしました。

Fireworksを愛してやまないYUKIです。こんにちは。好きすぎてこんなサイトをはじめてみました。
その名も「Fireworksマニア」。

コーヒーショップのWebデザイン90選

海外のWebデザインブログ「instantShift」において、コーヒーショップのWebサイトデザイン90種類がまとめられたエントリーがアップされています。

同系色の配色に迷ったときに使う3つのテクニック

同系色の配色に迷ったときに使う3つテクニック

ひさしぶりにデザイナーらしいエントリー。
Webデザインをやっていると、配色って結構悩んだりします。デザインにとりかかる前に、ある程度の色味ってアタマの中にあるのですが、細かく色を置いていくとバランスが悪かったりすることがあるんですよね。スライダーバーやカラーホイールで調整してみてもイマイチ・・・なんてことあるんじゃないでしょうか?

今回は同系色の色味に迷った際に、私が使っている方法を3つほど紹介します。

オリジナルのテクスチャを作って、デザインの幅を広げよう

AdobeのFireworksデベロッパーセンターに、テクスチャに関する記事を執筆しました。すでに公開されております。

オリジナルのテクスチャを作ることにより、用意されているテクスチャよりも太い斜線・間隔が広い斜線を実現する、チェックの大きさをより大きくするなど、デザインの幅が広がっていきます。
今回は、オリジナルテクスチャの作り方・適用の仕方を紹介します。

Webデザインに関する検定試験いろいろ

Webデザインに関する検定試験のまとめ

職場の同僚も方が「Webデザインの検定を受けようかな」的なことをおっしゃっていたので、軽くググってみたら、結構いろいろあるんですねぇ。
今日は、Webデザインに関する検定試験についてまとめてみました。

Fireworks texture gallery

CSS Nite in Ginza, Vol.35ではテクスチャについてお話しさせていただきました。
CSS Nite in Ginza, Vol.35での感想やスライド資料の配布は、明日(2009年5月22日)にエントリーいたします。しました。

今回イベントにあわせまして、Fireworksで使えるテクスチャファイル300種類が無料でダウンロードできるサイト「Fireworks texture gallery」を制作し、リリースいたしました。

イワタUDフォント

イワタUDフォントは、フォントの開発を行っている株式会社イワタ松下電器産業株式会社(現・パナソニック株式会社)とで開発されたフォントです。
「UD」とつくだけあってユニバーサルデザインに配慮され、以下の4つの観点から開発されたそうです。

  1. 視認性 ... 文字ひとつひとつの構成要素を視認しやすくする
  2. 判読性 ... 誤読しにくく、他の文字との判別をわかりやすくする
  3. デザイン性 ... シンプルさ、美しさ、整理、整合性をもつ
  4. 可読性 ... 文字列としての単語・文章の読みやすさ

オフィスアワード2008 大賞は株式会社コスモスイニシア

オフィスアワード2008

「働く人が選ぶ、ずっと働きたいオフィス」というコンセプトのもと行われたオフィスアワード2008。大賞に株式会社コスモスイニシア 内幸町オフィスが選ばれました。

オフィスアワード2008とは、これからビジネスパーソンとなる内定学生、および若手社会人が、会社の規模や業務内容に関わらず、「このオフィスでずっと働いてみたい」と思うオフィス空間を評価、投票し、大賞を決めるという、今までにないまったく新しいオフィスアワードです。

CSSiPhone

CSSでレイアウト・デザインされたiPhoneサイトのデザインギャラリー「CSSiPhone」が公開されています。

Googleによる絵文字オープンソースプロジェクト

2008年10月24日からGmailにて、2008年11月21日にはiPhone上でも絵文字が使えるようになりました。絵文字=携帯電話という認識は少し前の話で、ブログであったり、コミュニティサイトであったりと、最近ではPCでも当たり前のように使われています。

そして、各サービスが独自の絵文字を開発し提供している現状をみて、このような動きが出てくるのも必然的な出来事なのかなぁとも思います。