Webデザインリンク集「中の人」に訊く掲載のポイントとは?

OCT 01, 2014 / Written by WATARU INABA DESIGN, INTERVIEW, MEDIA

こんにちはメディア運営担当の稲葉です。

9月4日にリリースさせていただきました当ブログですが、予想以上の反響をいただきまして、、
誠にありがとうございます!
リリース後、今までの3~4倍のトラフィックがありスタッフ一同驚愕しております。

さて、ブログをリリースした9月4日はフォーデジットデザインウェブサイトの公開1周年でもありました。
公開直後から色々なWebデザインリンク集やポータルサイト、雑誌に掲載していただき、
フォーデジットデザインの今があるのも一重に皆々様のおかげだと思っております。

フォーデジットデザインの集客チャネルではリファラーが約60%と高く、主にWebデザインリンク集からの流入となっています。
その数約50サイト(多分)!!!
各リンク集の運営のみなさま及びキュレーターのみなさま掲載いただき誠にありがとうございます。
この場をお借りして厚く御礼申し上げます。

主にどのようなWebデザインリンク集に掲載いただいているか簡単にではありますが、ご紹介させていただきます!

初月の爆発的流入がインパクト straightline bookmark

straightline bookmarkさんは公開月の2013年9月に爆発的な流入数を叩きだし、
その後は落ち着きながらも継続した高い流入で、2位と僅差ではあるものの初月のインパクトが影響しトータル1位となっております。

膨大な量のサイトが掲載されていて、個人的にもこの業界に入りたての頃から拝見し諸々参考にしております。
この圧倒的な物量は多くの若手クリエイターに多大な影響を与えていることかと思います。

ちなみに同じstraightlineのgotoさんが運営されているW3Qでも
Webデザイナーなら抑えておきたい、今月の優れたWebデザイン(2013年9月)
2013年を代表するクリエイティブなWebサイト総まとめ
と掲載いただいております!!(W3Qさんも参照元10位以内に入っています!!)

掲載以後月次トップ MUUUUU.ORG

当ブログ最初の記事にも出演いただいたQuoitworksムラマツさんが運営されていて、月間PV40万を誇るMUUUUU.ORG
“縦長サイトのデザインリンク集”として有名で、掲載されているサイトはどれも実務で参考になるサイトばかりで、多くのクリエイターの”参考書”になっているのでは無いでしょうか?
公開月の翌月2013年10月から掲載いただいておりまして、
なんと、2013年10月から今まで参照元のWebデザインリンク集としては常に月次1位をキープしております!

継続して上位流入元となっている著名サイト!
I/O 3000」「S5 Style」「ズロック」「bookma!

前述2サイトと合わせて、こちら4サイトもWeb業界の方ならば「一度は見たことがある。」「継続して見ている。」サイトでは無いでしょうか?

I/O 3000はシンプルで見やすく、掲載サイトはシンプル系やスタイリッシュ系など一貫した基準を感じさせサイト自体のテイストを崩すことなくクオリティの高いサイトになっております。

S5 Styleはボタンのマウスオーバーによるインタラクションや、マウス位置に反応する背景のモーショングラフィックスといった演出など高いクリエイティビティに加えて、
豊富な検索軸で目的のデザインを見つけやすかったり、表示要素のユーザーセッティングが可能などWebデザイナーに向けてのキュレーションメディアとしても高い質を提供しているサイトだと思います。
またS5 Styleの田渕さんはARCHETYPのアートディレクター・デザイナーとしても活躍されていて、Quoitworksのムラマツさんとスクーで講義も行っていましたね!面白かったです!

ズロックは検索機能の中に地味に嬉しい「登録月の選択」があります!(地味とか言ってすみません、、、)
「あの頃流行ってた雰囲気ってどんな感じだっけ?」みたいなときや「あのサイトいつ頃リリースしたんだっけ?」という時に重宝する機能です!

bookma!は通常の「カラー」によるフィルタリングだけじゃなく「バックグラウンドカラー」によるフィルタリングが出来たり、
通常のサムネイル表示の他に1カラム構成に広げてサイトキャプチャが確認出来るなど検索ビジュアルに対するこだわりが垣間見れるサイトですね。

日本国内レスポンシブサイトに特化したデザインリンク集 responsive-jp

レスポンシブが流行りだした頃にこのサイトに行き着いた方も多いのではないでしょうか?
弊社への問い合わせもレスポンシブデザインを希望してRWDJPさんを閲覧し連絡してくる方が多くいらっしゃいます!

コメントもらってみた

今回、上記の日本を代表するWebデザインリンク集の中から、いくつかのサイトの運営の方々に
「フォーデジットデザインウェブサイトを掲載いただいた理由を教えて下さい!」
というメールをいきなり投げてみました!
やや”褒められ自慢”な感じも否めませんが、それぞれサイトには書いていないキュレーションのポイント等のお話もあったりしてとても興味深く参考になるコメントが多かったので、この場でいくつかご紹介させていただきたいと思います!

本質的な所は大切にしながらも、随所に訪問者に驚きを与えようとしている

まずは、straightline bookmarkのgotoさんからのコメントを紹介致します!

“掲載理由ですが、直感的にいいなと思うサイトを掲載していますので、
どこが良いのかと言われるとなかなか難しい所なのですが、
見やすさ、使いやすさといった本質的な所は大切にしながらも、
随所に訪問者に驚きを与えようとしている、そんな姿勢が素敵だと思いました。”

コメントありがとうございます!「直感的にいいなと思うサイト」この言葉にgotoさんのセンスの高さを感じました。
多くのクリエイターにインスピレーションを与えている掲載サイトたちと同様に弊社サイトもクリエイターに何かしらの影響を与えられればと思います!

印象に残るwebサイト

つづきましてMUUUUU.ORGのムラマツさんからのコメントを紹介致します!

“muuuuu.orgでは多角的な面から、
「実務レベルでデザインの参考になるか」という事を重視して掲載の方しております。
(縦長サイトと、うたっておりますが、オーソドックスで縦にスクロールする形のサイト型式という意味での縦長サイトで、LPやシングルページ、パララックスサイトを中心に集めている訳ではありません)
その中でフォーデジットデザインさんのサイトは以下の点において、非常に参考になると考え掲載の方させていただきました。

①.印象に残るwebサイト

印象に残るwebサイトというのは人に紹介しやすいwebサイトです。
そういった意味で「ワイヤーフレームのような画面遷移アクションのアノ制作会社のサイト」と人に紹介しやすくそこがまず良いと感じました。技術的にも難しいことをやっていますが、技術先行なものではなく、あくまでもコンセプトありきな所が素敵です。

②.メインビジュアルとコピーが秀逸。

メインコピーが「DESIGN for DELIGHT」。意味としては「 関わる人が幸せになるためのデザイン。 そして、つくるときに「楽しんでつくる」こと」
そのメインビジュアルとして、がやがや相談しながら制作しているようなメインビジュアル。
web制作会社のサイトは、制作実績をメインビジュアルにしたり、ソリューションをグイグイ出したりする中、この見せ方は良い差別化が出来ていて、洗練された印象を残すことができ、参考になる表現方法の一つだと感じました。単純に写真の質もコピーのタイポグラフィも素敵。

③.細部にかなりこだわっている。

1.メインビジュアルの写真と下の白い帯が、どんな画面サイズでも最高の状態で見えるように、精密にチューニングがされている。
2.欧文のwebフォントが海外のトレンドのフォントであるbrandon grotesqueを有料で買っている。これがかなり利いていてサイト全体がモダンに見える。
3.矩形ボタンのロールオーバーがなんか凄いことになってる(どうやってやるんですかw)
4.写真が全部撮影素材、単純に質が高い。
5.デバイスフォントの文字が大きく読みやすい
6.ピクセルアイコンがとても綺麗で気持ち良い。

④単純に軽くて使いやすい。

ライティングが良いので、どんなバリューがあるのが分かりやすい。”

がっつりコメントをいただきありがとうございますw
月間PV40万を誇るMUUUUU.ORGのキュレーション方針。大変興味深いお話が聞けました!

「どうやってるの?」

つづいてI/O 3000さんからのコメントを紹介致します!

“フォーデジットデザインさまの Webサイトは、
シンプルな構成とレイアウトのため、コンテンツが読みやすく、大きく配置された写真からも、社内の明るい雰囲気が伝わってきます。

Canvas を用いたダイナミックなエフェクトには心が踊り、
シンプルなデザインだからこそ、強く印象に残ります。
「どうやってるの?」と、思わず仕組みを追求したくなりました。

随所にクリエイティブへのこだわりと気配りが行き届いたサイトです。

I/O 3000 では、Web制作の参考となるハイクオリティなサイトをセレクトしています。
ご連絡いただいたサイトはすべて目を通していますので、お気軽にお問い合わせください。”

I/O 3000さんコメントありがとうございます!
お褒めいただいている「社内の明るい雰囲気」や「こだわりと気配りが行き届いた」という点。
実はPJのクリエイティブキーワードになっております。
そんな箇所を理由に掲載いただいたというコメントをいただきとても制作冥利につきます!

テイストにブレがない

つづいてS5-Styleの田渕さんからのコメントを紹介致します!

“S5-Styleでは、掲載するWebサイトを選定する時にいくつかのポイントがあり、そのポイントを上手に達成してるかどうかを確認しています。
ざっくり言うと、魅力的かどうか、読みやすいかどうか、技術が高いかどうか、という感じです。

また、僕は普段アートディレクション、デザイン、フロントエンドディベロップメントをメインに仕事していますので、僕自身がその時々で感じた直感なども踏まえつつ選定させてもらっています。

ほんとは解説とかするような立場ではないのですが、、、 恐縮ながら御社サイトで感じた事をポイントに沿って記載させていただきます!!

①魅力的かどうか

時代の流行をちゃんと考慮したトーンマナーが好印象でした。
サイトがリニューアルされた時期は、世間では御社サイトのようにウィンドウ全体を幅広くつかって縦にコンテンツを積んでいくレイアウトが少しずつ増えてきた時だと思います。その中で流行に乗ろうとしてあまり上手にまとめられてないデザインもよく目にしていました。

そんな中、御社サイトでは1つ1つのエリアの互いの境界が明確なのと、エリアの役割ごとに印象を変えてコントラストがついているのでエリア設計がとても上手だなと感じました。
また、見出しのまわりに適度なホワイトスペースがあるのでアイキャッチが明確で文章やコンテンツが読みやすいと思いました。

それと、フォトディレクションにも御社の個性が現れていると思いました。
エンドクライアント向けというよりは同業者向けに構図を検討されているように感じ、サイト全体を通してみてもテイストにブレがないと思いました。色合いなどの絵づくりの面でも統一感があってこだわりが感じられました。

②読みやすいかどうか

縦積みのレイアウトは画面の中央を上から下の方向に読み進めていく導線がベターです。そしてエリアの幅を広くつかえるが故にエリアの中でのカラムの設計が重要になってくると思っています。要素を上下においた場合と左右においた場合とで、読みやすさや、情報のプライオリティに差がつきやすいので、カラムの取り入れ方がとても難しいものだと感じています。

御社サイトでは、スクロールをして自然に読み進めていくことのできる導線設計がされてと思いました。スクロールして読み進める箇所とスクロールを止めて熟読する箇所と、上手に設計されている読みやすいレイアウトだと思いました。

③技術が高いかどうか

ページ遷移やマウスオーバーのアテンションで、ワイヤーフレームのようなラインがでる演出がとても面白いと思いました。
演出があることで本来の読みやすさや使いやすさを妨害しれいるわけでもなく、シンプルでありながらとても個性的だと感じました。”

キュレーションポイント&デザイナー視点でのコメントありがとうございます!
S5-Style運営と同時にARCHETYPでも活躍されている田渕さんの視点。
なかなかお聞きする機会が無いものなので大変興味深いお話でした!

シンプルで洗練されたデザイン

つづいてbookma!のTanakaさんからのコメントを紹介致します!

“FOURDIGIT DESIGN Inc.様
サイト公開1周年おめでとうございます。
謎のゴリラがいるウェブデザイン参考サイトbookma!でございます。

bookma!では掲載サイトを選定する際に目新しさや斬新さよりも、
伝えたいモノ・コトがいかにデザインや操作性に反映されているかを重視しています。

FOURDIGIT DESIGN Inc.様のサイトは
シンプルで洗練されたデザインに心くすぐるエフェクトを加えて素晴らしいサイトに出来上がっていると思います。

これからも素敵なクリエイティブを期待しております!

bookma!運営 – Uichiro Tanaka”

「伝えたいモノ・コトがいかにデザインや操作性に反映されているか」このキュレーションポイントは弊社が業務上大事にしている事でもあるので、
そのようなポイントで掲載いただいた事は感無量です。。ありがとうございます!

神対応すぎる!!

以上がいただいたコメントです!
なんかこう…全然面識の無い人間が、いきなり「コメントください!」とメールしたのにも関わらず、みなさまの神対応に感激致しました。本当にありがとうございます!
また、普段なかなか聞く機会の無いキュレーションのポイントやデザインに対する考え方等、大変興味深いお話伺う事ができ勉強になりました。

少し書かせていただいておりますが、次回は、自社サイトリニューアル1周年記事第2段として
“実際私たちがどういう思いで作ったか、何を目指し、何を伝えたくて作ったのか…”
担当クリエイターの話を交えてリニューアルの裏側を綴らせていただきたいと思います!

末筆ながら、コメントをいただいた皆様への御礼と共に、ますますのご活躍をお祈り申し上げます!

  • このエントリーをはてなブックマークに追加
Written by WATARU INABA
Related Posts

Contact Us

お仕事の依頼やご相談、弊社ご説明は
こちらからお問い合わせください。
TEL : 03-5774-6809 / 
FAX : 03-5774-6705