インタラクティブPDFでつくったインタラクティブPDFのつくりかた〜動画/音声再生・ページ効果編〜

ダウンロード

InDesignで動画や音声付きのPDFファイルの作り方を説明してます。サンプルもついています。紙の本では表現できない、電子書籍の魅力はこういった点にあると思うので、これから電子書籍の出版を考えている人には参考になると思います。

地域でメディアづくりをはじめよう

ダウンロード

１年間、ある地域のアートプロジェクトにデザインコーディネーターとして参加し、市民の方や、学生と一緒に、ウェブサイトをはじめ、メディアづくりを行ってきた筆者の体験談をまとめた本。いろんな人と協力して作り上げていく様子が説明されています。かわいらしいイラストも魅力。

WordPressで簡単ホームページ管理

ダウンロード

WordPressを使って記事やページの投稿の仕方を説明しています。カスタマイズではなく、「使い方」を中心に説明しているので、制作者よりクライアントに読んで欲しい本です。バージョンが少し前のものなのですが、まだまだ使えると思います。WordPressでサイトを作ったらこの本も一緒にクライアントに紹介してみるといいでしょう。

デザインレイアウトノウハウブック

ダウンロード

優先順位の付け方、グループ分け、余白の使い方などをサクッと紹介しています。再確認の意味もこめて、時々読み返してみるといいかも。

エリトア2011 3rd 冬 – フリーペーパー・エリトア

ダウンロード

「エリトア」は、アーティストが集まり自分達の作品や活動をより多くの人に知ってもらおうという目的で始まったフリーペーパー。イベントや展示の告知を始め、作品制作の現場などが紹介されています。普段アートに触れる機会がない人でも楽しめるような内容です。こちらからバックナンバーをダウンロードすることもできます。

Don’t Make Me Think

オリジナル｜日本語翻訳版｜一部の章をダウンロード

日本では「ウェブユーザビリティの法則」というタイトルで翻訳されているようです。海外では「ユーザビリティといえばこの本！」というくらい人気の一冊。私が今まで海外で立ち寄ったWebの学校や制作会社には、100%の確率でこの本が置いてあるほど。出版されて10年以上たっているようですが、その人気は衰えません。一部の章をPDFでダウンロードできます。もう一度じっくり読み直したいですね。

Getting Real

オリジナル｜日本語翻訳版｜ブラウザーで読む

Basecampで有名な37signalsが発行したビジネス本。いかにシンプルに、いかに素早く仕事をすすめるかについて熱く語られています。PDFは有料ですが、ブラウザーで読めるHTML版は無料で読めます。これもとても人気な本で、シドニーで働いていた会社の同僚は週末にこの本を一気に読み、月曜の朝突然「みんな聞いてくれ、俺は先週までの俺とは違う。フツフツと！ヤル気が！みなぎってるんだ！！」と人格まで変わっていました。オリジナル英語版も比較的簡単な英語で書かれているのでサクサク読み進められます（多分）。

Type Classification eBook

Webサイト｜ダウンロード

タイプフェイスについての本です。セリフ・サンセリフ・モダン・ゴシック・手描き風など、フォントの種類や表示例を紹介しています。紙面全体のデザインもかっこよく、英語の本ですが見て楽しめると思います。

How To Be Creative

Webサイト｜ダウンロード

英語の本です。クリエイティブに生きるとはなんだろう？インスピレーションって探して見つかるものなのか？などを26の項目に分けて完結に説明しています。各項目の見出しや時折出てくる力強い言葉がやる気を出してくれます。クリエイターじゃなくても読むと前向きになれそう。

その他、「無料で読めるプログラミング電子書籍52冊」では英語で書かれたプログラミング関連のコンテンツを読む事ができます（電子書籍として出版しているのではなく、ブラウザーで読めるコンテンツ多め）。いろいろ調べてみましたが、やはりまだまだ日本語の電子書籍は少ないですね…。先日発表された「iTunes U」を含め、今後日本語コンテンツが増えていくことに期待！

ミニマルデザインとは

そもそもミニマルデザインとはなんなんでしょう？Wikipediaを見ると

ミニマル・デザイン（Minimal Design）は、あまり使用しない機能のせいでシステムが肥大化することを避け、必要最小限の機能に絞って設計することをいう。

とあります。冒頭でも書いたとおり、要素が多すぎると結局なにが主張したいのかわからないデザインになってしまいます。それを避けるために、見せたいものや伝えたいことの中から引き算をしていき、最小限度におさえたデザインをミニマルデザインと呼んでいます。余分なものをそぎ落とすことで、ユーザーにより明確にメッセージを伝えることが可能です。

効果的なミニマルデザインに挑戦！

ではどうすれば効果的なミニマルデザインに仕上げることができるのでしょう？そのポイント紹介します。

何を目立たせるかを明確にする

「あれも見て欲しい」「これも見て欲しい」とたくさんのものを打ち出すのではなく、ユーザーに見て欲しい１つのものにフォーカスを当てます。

Less is bore

色をおさえてシンプルにしているつもりでも、表示する要素が多いのでシンプルになりきれてません。これはこれで問題ないと思いますが、ミニマルにするにはもう少しけずってみましょう。

Less is more

思い切って商品画像と商品名、値段のみを表示しました。商品画像がより目立たされ、スッキリとまとまりました。

メリハリをつける

ミニマルデザインと退屈なデザインの一番の違いはここだと思っています。一口にメリハリ…といってもその方法は様々ですが、ここではテキストを使って違いをみてみましょう。

Less is bore

文章が同じサイズで羅列されています。パッと見て何が言いたいのかわかりにくですね。

Less is more

見出しを大きく打ち出しました。テキストでメリハリを付けるひとつの手段として、ジャンプ率を高くする方法があります。ジャンプ率とは本文と見出しの文字サイズの比率のことです。サイズの大小の比率が大きいほどジャンプ率は高くなり、比率が小さいとジャンプ率は低くなります。ジャンプ率が高ければ高いほどメリハリがついて印象的なデザインになります。

余白のバランスに気をつける

余白があるとミニマル？いいえ、そうとは限りません。下の画像を見たらきっと納得するはずです。

Less is bore

上の画像では余白のバランスが悪く、これはわざと作った余白なのか、ただの余った空欄なのかがわかりません。余白があるのに美しくない。なぜか？その答えは余白のバランス＝余白同士の距離にあります。

Less is more

２つの要素を真ん中にまとめました。上下の余白と左右の余白を同じ値にするとバランスがとれて美しく配置されます。ただしWebの場合は特に下の値がブラウザーサイズによって異なりますよね。

そこで第二案。画面左・画面上からの距離を同じにしました。また２つの要素の間の距離は画面上・左の距離の半分くらいです。他にも配置の仕方はいろいろあるので、いろんなデザインを見てバランスのとり方を研究するとつかめてくると思います。

色をおさえる

多くの「ミニマルデザイン」と呼ばれるWebサイトは無彩色（白・グレイ・黒）を使っています。その理由はコントラストをつけやすいく、色味がない分シンプルにまとめられるからです。

Less is bore

例えばこのデザインでは、配置の仕方など、とってもシンプルなのに色を使いすぎています。

Less is more

モノクロ＋１色でまとめてみました。「今すぐ注文する」をクリックしてほしいというのがひと目でわかりますね。このモノクロ＋１色という配色はミニマルではないデザインでもよく使われる、簡単にアクセントをつけることのできる配色のひとつです。

細部にこだわる

ただ目立たせたいものをドカーンと置いただけでは、ミニマルデザイン特有の高級感や上品さは演出しきれません。「少しの手間で大きく変わる、細部にこだわったWebデザインを」の記事でも書いたとおり、わずかなテクスチャを加えたり、1pxにこだわったりして細部を作り込むことで、より洗練されたデザインが完成します。

Less is bore

商品詳細ページの例です。悪くはないかもしれませんが、なにか物足りなさを感じませんか？

Less is more

背景に白〜グレイのグラデーション、商品を反射させたように見せ、CTAボタンにもグラデーションを入れてみました。少しの違いですが、より完成度の高いデザインに仕上がりました。このようにわずかに効果をつけるだけで変わってきます。

ミニマルデザインの問題点

上品にまとめることができるミニマルデザインデザインですが、いいことばかりではありません。主に以下の問題点があげられると思います。

なんのWebサイトかわからない

そのサイトをパッと見た瞬間になんのサイトなのかがわからない。一番ありがちな問題点だと思います。一般的にページを開いた５秒間の内に、それがなんのWebサイトなのかがわかるかどうかはとても重要とされています。すぐにわからないサイトは直帰率の低下にも繋がるため、簡素すぎて目的がわからないサイトは避けるべきです。

どれがクリックできるかわからない

テキストリンクのうち、デフォルト設定である下線＋青色のテキストが一番リンクだと認識されやすいようです。しかし、中には装飾をそぎ落としすぎてテキストリンクの装飾も一切排除しているサイトも…。マウスオーバーするまでそれがリンクなのかわからない、なんてテキストはユーザビリティを無視しすぎです。引き算のしすぎに注意しましょう。

「でもクライアントにアレコレ詰めろって言われるんだよねー」

これ、デザインをしていたらよくあると思いますｗ そんな時は「可読性の向上」「シンプルな美しさ」「訴求力の高さ」を合言葉にミニマルデザインのよさを熱弁すると何か変わるかもしれません。また、「もしマイクロソフトがiPodのパッケージをデザインしたら･･･」で紹介されていたこの動画はかなり説得力があると思いますｗ

効果的なミニマルデザインの例

アップル

ミニマルといえばアップル！注目してほしい要素以外を極力そぎ落とし、洗練されたデザインを作り続けています。

Omnia

他の要素を極力小さくすることで、フルスクリーンで見せている背景画像がさらに引き立っています。

Excellence Image

大きなキャッチコピーがパッと目にとまります。色もおさえてありメリハリがついてます。

T O Y

ミニマルデザインといってもモノクロだけではありません。このサイトはビビッドな一色を背景色に使い、飾りもほとんどないデザインです。装飾をしなくとも色が派手なのでインパクトがあります。※Flash

Rob Treutel

メニュー名をどーんと表示させているだけですが、それでどんな内容のサイトなのかわかります。

iconwerk

アイコンデザインを専門にしているデザイン会社のWebサイト。アイコンにフォーカスするよう余計な情報を一切載せていません。

Mike Ingham

グラデーションやシャドウの入れ方が上手で、全体的にとってもエレガント。

Steffen Knudsen Allen

フォトグラファーさんのWebサイト。写真以外の要素はほぼ装飾なしです。

CRW / Corporate Risk Watch

グリッドが特徴のサイト。モノクロで統一し、グリッドに合わせてカチッとデザインしている分、手描き風の青いラインが目立ちます。

Checkland Kindleysides

色も表示する要素も抑えて全体の動きに注目するようにデザインされています。※Flash

流行っているからといってどのサイトでもミニマルデザインが取り入れられるかといったら、そういうわけではありません。デザイナーの自己満足な「作品」にならないよう、取り入れていきたいですね。

インスピレーションを探すお散歩のコツ

カメラ必須！

これはやる気の次に必要！素敵なデザインを見つけて、数日は覚えておけると思いますが、やはり人間は忘れていく悲しい生き物。写真にとって保存しておくと後から見返せるので、必ず持っていきましょう！店内が暗かったり、黄色っぽい照明を使っているところも多いので、その辺りを調整できるカメラがあると◎　また、店内の撮影を禁止しているところもあると思うので、確認＆他の方の迷惑にならないように気をつけましょう。

注目ポイント

街に出たらまずキョロキョロと辺りを見渡してみます。不審者に思われない程度のキョロキョロ感でよろしくお願いします。そこで目にとまった看板やロゴ、パネル、パンフレット、本などをじっくり眺めます。眺める時は以下のポイントに注目しましょう。

• 色の使い方（配色）
• タイポグラフィ
• 質感
• デザイン要素

触った時の質感を感じれるのはオフラインならでは。どんなデザインにどんなテクスチャを加えて質感を与えているのか、よく見ておきましょう。この時感じた印象は、そのままテクスチャ素材を使ってWebサイトの背景画像などに使えます。

デザイン要素とは、「デザインの要素と原則」で紹介したスペース・線・バランス・形などのことです。記事を読んで、デザイン要素の基本をざっくり覚えてデザインを眺めると、また違った視点で観察することができます。

メモをとる

上記の注目ポイントを書き留めておくために、メモ帳とペン、またはiPhoneやiPadなど、メモを取れる環境を用意。その時感じた印象も時間がたつごとに薄れていってしまうので、その場でメモをとるといいですね。私はiPhoneアプリのEvernoteを使ってメモをとっています。

お散歩にでかけよう！

という事でこの日は私の住んでいるバンクーバーのダウンタウンを散策。ほぼ毎日とおる場所ばかりですが、今日は「インスピレーションを求めて」のお散歩なので、いつもとは少し見方を変えて歩きますよ！

駅から出るとFedEx号発見！FedExのロゴは「E」と「x」の間のスペースを使って矢印を表しているのです。昔お散歩している路上でFedEx号を見た時にこの事に気づきました！お店や車にあるロゴに注目するのもいいですね！

服屋さんで

まずはMEXXの店頭ディスプレイ。オレンジはポップで明るいイメージが強いのですが、黒と合わせるといい具合にシックにまとまりますね。この配色いただき。

続いてBCBGMAXAZRIA。ディスプレイ全体がタブレット風になってます！これは面白いアイデア！

こちらはHOLLISTERのお店の前。HOLLISTERのWebサイトは店内のデザインとかなり合わせていました！店内で使われている壁紙と同じ模様をサイトの背景画像に使っていたり（店内は暗すぎて写真撮れなかった…）。Webサイトを制作する前のブランディングをしっかりする必要がありますね。

Bench.の店頭パネル。斜めに配置されたネガ風写真がかっこいいですね。

Bench.のパーカー。この模様は背景画像に使ったらかっこよさそうだなあ。

ギラギラっぷりすごいｗ グラデーションとこのギラギラをうまくPhotoshopで表現できればアクセントになりそうだなあ。

雑貨屋さんで

ベビー用品を置いているコーナー。ベビー用のデザインはパステル系のかなり淡い色が使われる確率高い！

レタープレス加工をしたスケジュール帳。レザーの質感と曲線を用いた模様、彩度の低い色合いでエレガントなデザインに仕上がっています。レザー＋レタープレスは見出しにうまく使えそう。

キャンドルと文字を組み合わせて、ヘッダー部分にどかーんと置くとインパクトありそう…。

文具屋さんで

大好きなグリーティングカードコーナーへ。こんなオリエンタルな雰囲気の配色は使った事がないのでいい刺激になりました。今度試してみよう。

細かい線と色合いが綺麗なカード。こういった細かい線は手描き風で、少し歪ませた方が味があっていいですね。これは背景画像だけでなく、ちょっとしたアクセントに使えそう。

本屋さんで

大胆なタイトルの配置がパッと目につきますね。ざらついた質感がいい感じです。こんなファーストビューのサイトもいいなあ。（Fingerprint No. 2: The Evolution of Handmade Elements in Graphic Design by Chen Design Associates）

黒＋アクセントの赤がかっこいい！ラベルを斜めに貼りつけた感じはサイトの見出し部分に使えそう。（Thirteen Reasons Why by Jay Asher）

木目＋手描き風イラストで温かい雰囲気が漂っています。（Where Things Come Back by John Corey Whaley）

曲線をうまく使ったタイポグラフィがいいですね。（Willie’s Chocolate Bible by Willie Harcourt-Cooze）

家具屋さんで

白をベースにベージュ＋淡い水色で優しい雰囲気の配色に。家具屋さんは１つのテーマに沿った配色の家具や小物をうまくまとめて展示しているので、見ていて楽しいですよ。

お散歩中に役立つiPhoneアプリ

Evernote

見つけた素敵なデザインの写真はEvernoteにストックしておくと便利！Evernoteアプリがあればメモも一緒に書いておけるので、その時受けた印象をその場で保存することができます。「WebデザイナーにおすすめのEvernote活用術」では主にWebサイトのデザインの保存方法を紹介していますが、オフラインで見つけたデザインも同様にタグをつけて保存しています。

ColorSchemer

「WebデザイナーにおすすめのiPhoneアプリ21」でも紹介したアプリ、「ColorSchemer」。写真から色を抽出して配色パターンを作成する事ができます。色が綺麗なデザインや風景に出会えたらぜひ使ってみてください！

いかがでしたか？一人でお散歩だと自分の世界に入り込めるので私は好きですが、同じようにインスピレーションを求めているお友達とあーだこーだ言いながらお散歩するのも楽しそうです！

今回はバンクーバーでいう街の中心部のお散歩でしたが、違うエリアには違った雰囲気のお店がたくさんあります。また、公園や山・海などの自然から得られるインスピレーションもたくさんあります。どこの地域でもきっとそうですよね？ちょっと視点を変えるだけで見慣れた風景もがらりと変わりますよ！さぁ、皆さんも今直ぐカメラを持ってインスピレーション探しの旅にでかけましょう！

Web制作会社のサイトの特徴

Web制作会社のポートフォリオサイトを眺めていて、いくつか発見があったのでまとめてみます。

制作実績

多くの会社がjQueryなどを使って動きをつけて作品を紹介していました。また、以下の情報を載せているサイトが多かったです。

• スクリーンショット
• クライアント名
• 制作したサイトの簡単な説明文（長過ぎ注意）
• いつ制作したのか
• WebサイトURL
• クライアントからの感想

こちらのサイトではWebサイトを動画で見ることができます。見どころをしっかり抑え、jQueryなどのアニメーションもその場で見ることができるので、動きのあるWebサイトを紹介する際には特に効果がありそうです。

お問い合わせフォーム

お問い合わせフォームに制作依頼内容、予算などを加えている会社も多く見られました。依頼専用フォームと質問・意見用フォームでわけて、ザックリでいいので依頼内容を書いてもらえば、ムダが省けたり、最初からスムーズにやりとりできそうですね。

制作依頼内容、予算、ページ数、希望製作期間などが送信できるようになっているサイトもチラホラ。

ブログ

ブログは必須ではないと思いますが、ブログを書いている制作会社が多い気がします。内容は基本的にはWebサイトやサービスの新着情報ですが、中には制作したWebサイトやマーケティング戦略のケーススタディを公開している会社もありました。具体的には、以下の内容をまとめていました。

• 制作したWebサイトの概要
• クライアントからの要望
• 制作したWebサイトの見どころ
• 実際に行ったマーケティング概要
• 結果（アクセス解析）
• クライアントからの感想

Radiumのブログでは実際にしたデザインの過程をワイヤーフレームから紹介したり、マーケティングで使っているツールの紹介、ROIの計算方法など、制作者の勉強にもなる記事を公開しています。

Icelabのブログでは実際に製作中のアプリの製作過程を記事で紹介しています。コードを書いて説明もしています。アプリ公開後ではなく、製作途中に書いていってるのが興味深いですね。

遊び心

Web制作会社のサイトでは細かい所に仕掛けがあったり、思わず眺めてしまったりという「小ネタ」が仕込まれていたりします。自社サイトということもあり、自由に仕込めるんでしょうねｗ

作品一覧のサムネイル画像にマウスオーバーすると「Luv This!（いいね！）」がクリックできます。クリックすると下からニョキっとコンタクトフォームが現れ、どのサイトにいいね！したのかを送信する事ができます。これからWebサイト制作を依頼しようとしているクライアントがどんなデザインが好みなのかがわかるいいアイデアですね！

ゴリラが現れたり。

フッターで「London Baby!」と叫んでみたり。

マフィアに殺されそうな人を発見したり。

Web制作会社のポートフォリオWebサイト

私が見ていて「お！」と思った素敵なデザインのWebサイトをいくつか紹介します。ざっくりカテゴリー分けしてみました。

シンプル＋ビビッドカラー

1. Unfold（ノルウェー）

スクロールする時の動きがおもしろい！しかも無限ループです。斜めの線の使い方が素晴らしい。

2. Moovents（イタリア）

「M」の字を動かしてお花のような模様にしています。さらにカラフルな色を足してパララックス効果で動かしているところにクリエイティブ性を感じますね！

3. 2am（UK）

かわいらしいイメージのあるピンクも、モノクロ＋彩度の高いピンクだとこんなにかっこいいデザインに仕上がります。

4. tme solutions（UK）

どのカテゴリーにするか悩みました…。なぜなら見るエリアによってデザインが違うからです。手描き風だったりクールな印象だったり。ナビゲーションメニューが上からびよーんと現れるのもおもしろい！いろんなところにユニークなアイデアが仕込まれています。

5. Uber（UK）

フルスクリーンの背景画像が迫力あります。「Showreel」のページではさらに迫力のあるフルスクリーンのプロモーションビデオが見ることができます。

6. Blurb Creative（UK）

暗めの色合いの中で浮かび上がるビビッドな色が特徴のデザイン。背景の模様も好きです。半透明のボックスを少しずらして変化をつけています。

7. The Creative District（アイルランド）

ピンクを使っていますが、セリフフォントを使って大人っぽいイメージにまとめています。

ミニマル

8. enjoythis（UK）

とってもシンプルなデザインの中で手描き風のロゴがかわいらしさ・素朴感を演出しています。

9. DRAFT（日本）

ウィンドウのサイズによってカラム数が変わるレイアウト（可変カラムと言うんですかね？）が素敵なWebサイト。ぜひウィンドウのサイズを変更してみてください！

10. Birch Studio Ltd（UK）

上部の横長に広がる作品写真が特徴。他をシンプルに抑えている分、余計目立ちますね。

11. Erskine Design（UK）

ところどころ手描き風のデザインも加えていますが、色味を抑えている分大人っぽく仕上がっています。

12. TH= SUM（カナダ）

色を一切使わない、モノクロオンリーのサイト。シックな雰囲気のなか、イラストがアクセントになってかしこまりすぎないデザイン。

13. Tokyo Digital（UK）

イギリスにあるのにTokyoという不思議な名前の制作会社。グリッドベースの整列されたデザインが特徴。

イラスト

14. Pieoneers（カナダ）

ホームのポップなイラストはもちろん、各ページにある手描き風の大きな見出しイラストもインパクト大！

15. Creative Spark（UK）

ビビッドな色と不思議系キャラクターがインパクトのあるサイト。Webだけでなくプリントデザインも素敵な作品ばかりです。

16. Orange Label Design Studio（UK）

カラフルなドット絵が特徴のWebサイト。マリリン・モンロー、マフィアに今にも殺されそうな人、おっぱい丸出しのおねーちゃんなど、細かいところまでよく見てみるとおもしろいです！

17. Radium（US）

Web制作ではなくインターネットマーケティングの会社ですが、好きなデザインのサイトなので一緒にご紹介。イラストやカラフルな色使いが印象的です。

18. Studio 7 Designs（カナダ）

シロクマさんやオーロラ、トーテムポール、レイヴンなど、カナダらしいイラストが散りばめられています。イラストを使ったデザインが得意のよう。

19. WitFlow（ポーランド）

ベージュ×青緑の配色が個人的に気に入りました。シャドウやグラデーションを使わずに表現した3D風ボックスがかわいらしいです。

20. Actual Size Creative（US）

スクロールや開閉するコンテンツのアニメーションが特徴。ゴリラが登り降りしたり、住所にわざわざ「アメリカ　地球」と書いちゃうところに遊び心を感じます。

21. Local Wisdom（US）

シャドウをうまく利用して奥行きが感じられるデザイン。色使いも個性的です。

テクスチャ

22. Marah Creative（US）

わずかなテクスチャ感と、ホームのイメージやフッターのリボンについたシャドウのつけ方が上手！

23. Amazee Labs（スイス）

テクスチャとイラストが素敵にマッチしています。大胆な色使いやタイポグラフィもうまくまとまっていますね。

24. Kooba（アイルランド）

紙をちぎったような質感や水彩画のようなエフェクトが美しいサイト。

25. Goldenboy（UK）

かっこいいイメージになりがちなグランジ風デザインも、色を押さえることでどこかクラシカルな雰囲気に。

手描き風

26. 株式会社ブラン（日本）

チョコチョコ歩く女の子と手描き風のデザインがかわいらしいサイト。

27. Icelab（オーストラリア）

目の覚めるような鮮やかな水色とかわいらしいイラストが特徴のサイト。赤がアクセントになって引き締まっていますね。

28. Carsonified（UK）

手描き風イラストや２色のみを使った配色、タイポグラフィ、大胆な配置など、見ているだけで楽しくなるようなサイト。

29. Pixel Thread（UK）

手描き風のロゴや木目調の背景、色合いがとっても温かみがあります。

クール

30. MetaLab（カナダ）

前の記事「少しの手間で大きく変わる、細部にこだわったWebデザインを」でも紹介した、1pxのラインをうまく取り入れているWebサイト。カナダの会社とは知りませんでした！

31. FLIPP Advertising（カナダ）

「What we do」ページのパイチャートを使ったサービス紹介の仕方がおもしろいですね。

32. Invoke（カナダ）

こちらも「少しの手間で大きく変わる、細部にこだわったWebデザインを」で紹介しました。深みのある赤がかっこいいですね。

33. Paramore（US）

各ページわずかなアニメーションがシンプルでかっこいいです。社内写真も公開していて、思わず「こんなところで働きたい！」と思ってしまうかも。

34. formoda（UK）

制作実績のページではその作品に合わせて上部背景画像が変わります。こだわってますね！

35. Abstraktion（UK）

黒×赤はやっぱりかっこいいですね！矢印キーで操作できます。

いろいろ見てみましたが「このサイトこの国だったんだ！」なんて発見もたくさんありました。あ、こっそり国をメモしているのバレちゃいました？そもそも「次はどこの国に住もうかなー？せっかくだからおもしろいWeb制作会社が多い国がいいなあ！」と思ってWeb制作会社のWebサイトを探し始めたのがきっかけなのです。で、150社以上Web制作会社を見てみましたが、その約４割がイギリスの制作会社のデザインでした…！次行く国はイギリスで決まりですかね！

オフ会に参加しました

ホームページを作る人のネタ帳のYamada氏が東京に遊びに行くという情報をキャッチしたので、それにあわせて私もオーストラリアから帰国！1月29日に「ネタ帳とWebクリエイターボックスの上京を歓迎してくださいの会」と題し、オフ会を開催しました！総勢約80人とあって、めまぐるしく挨拶まわりを…。もしお話できなかった人がいたら本当にごめんなさいです…。

素敵な名刺頂きました

そのオフ会で頂いたクリエイティブなデザインの名刺を紹介します！形、素材、デザインと、見ていて楽しくなるデザインがたくさん！名刺デザインの参考にして頂ければと思います。

Webクリエイターボックス Mana

まずは私、Manaの名刺です。半透明名刺。明かりのないところでは見えにくいという短所もあります。

小西裕太さん

クリエイティブディレクターの小西裕太さんの名刺。ロゴとハートの部分はオレンジ色に透き通っています。その部分にこっそり小さなハートがあるのもポイント！

小西裕太さん（K-Musiclife）

小西さんのネットレーベル K-Musiclifeの名刺も頂きました。真っ青な水の写真がきれいです。

ウンバボォさん

ウンバボォさんの名刺。イラストがかわいい！デザインは10パターンあり、全部集めると一つの絵になると聞き、無理をいって写真を送って頂きました！おもしろいアイデアですね。

kazumissimiさん

kazumissimiのkazumissimiさんの名刺。エレガントなデザインと滑らかなさわり心地が素敵な名刺です。名刺作成時のエピソードは「個人名刺(簡易版)をつくりました。」を見てみてください！

ハムさん

THE HAM MEDIA BLOGのハムさんの名刺。ロゴイラストを拡大して背景の模様にしています。色もいいですね！

Naoさん

Web系SEのNaoさんの名刺。透明というだけでも印象的なんですが、手書き風フォントとアイコンをプラスしてさらにかわいいイメージに。

山岸由佳さん（A.C.O）

株式会社A.C.O.の山岸さんの名刺。シンプルながらビビッドな色合いでインパクトあります。

山岸由佳さん（個人用）

もうひとつ、山岸由佳さんの個人用名刺。ちょっぴりグランジを聞かせたフォントと紫の色合いが素敵。

まみぺこさん

まみぺこ.netのまみぺこさんの名刺。イラストと透明感がとってもかわいい！

Vanillateさん

バニレートデザイン事務所のVanillateさんの名刺。紙の質感とイラストが印象的です。

かすみさん

designbitsのかすみさんの名刺。Webサイトと同じく、紙をちぎった感じのかわいらしいデザインです。

タカバシさん

生ビールブログのタカバシさんの名刺。ビール色全開です！黄色と黒の組み合わせはパッと見ただけでも印象に残りますね。

山口明さん

デザイナー山口さんの名刺。驚くほどシンプル。そのシンプルさが逆に印象に残りました。

ぺぺんさん

ぺぺんさんの名刺。ぺんぎんさんのイラストがかわいい！温かみのある素材もポイント。

マエダカズノリさん

maechuu.comのマエダカズノリさんの名刺。モノクロ＋青のシンプルなデザイン。英語表記のみなので、さらにスッキリとみえます。

Wacharealさん

イラストレーターのWacharealこと渡辺さんの名刺。彼のサイトでかっこいいイラストが見れます！

Senchangさん

Senchang.netの仙ちゃんの名刺。サイトはまだ準備中ですが、準備中ページが可愛かったのであえて掲載。グラフのアイデアがおもしろいです。

ます子さん

イラストレーターのます子さんの名刺。名刺同様、ほっとするような温かみのあるイラストを描かれています。彼女のイラストはウェブサイト（現在改装中）で一部見ることができます。

Mighty Worksさん

Mighty Worksの豊田さんの名刺。サイトに合わせたデザインがかっこいいです。

川上大さん

Twice UPの川上大さんの名刺。モノクロでとってもシンプルですが、型押し加工がかっこいいデザインです。

mr. myselfさん

mr. myselfさんのちっちゃくてかわいらしい名刺。標準名刺サイズの半分以下の大きさです。

するぷさん

和洋風◎のするぷさんの名刺。半透明＋インパクトのあるイラストで一度見たら忘れられないはず。

Takuya Moriさん

TM WorksのMoriさんの名刺。裏面のイラストがなんだか親近感わきます。

HRさん

HR.STUDIOのHRことカトウヒロアキさんの名刺。明るい緑がアクセントとなって全体を引き締めています。清潔感のあるデザイン。

hatch2さん

hatch2のくまくまさんの名刺。大きめロゴを使ったミニマルなデザイン。

室井浩志さん

gimik designのWebデザイナー、室井さんの名刺。手書き風ロゴとイラストが素敵。色を使わなくてもクールなデザインになりますね。

groovesさん

groovesさんの名刺。シンプルをビビッドな色で印象的なデザインに。他にもカラーバリエーションがあるようです。

はっち

お友達はっちの名刺。…パーティーの前日に慌てて作った手作り名刺だそうです。逆に味があってかわいかったので紹介しますｗ

デザインアイデアのヒントになる名刺、見つかりましたか？もし次回オフ会開催するのであれば、もっと時間をとってみなさんとゆっくりお話したいですね！ありがとうございました！