こんにちは、iDID Magazine編集部です。GWも明けて、一週間。みなさまいかがお過ごしでしたでしょうか。今回は3月に引き続き、4月に話題になった国内のWebサイトをまとめてみました。4月は、前月よりもリリースされたサイトが多かったように感じます。編集部で観測できた限りでも80件ぐらいはありましたので、実際はこの3倍ぐらいはあるのでしょうか。それとも4倍でしょうか。もしかしたら5倍ぐらいかもしれません。いったいどんなすばらしいサイトがリリースされていたのか、振り返るためのご参考になれば、編集部としてもうれしいです。

それでは、はじめてみたいと思います。どうぞ！

1. NEWPEACE / コーポレートリブランディング

4月、一番話題だったかもしれません。軽やかさをコンセプトとした新CIの流れを引き継ぎ、軽やかな線がモチーフになっていると思うのですが、線という二次元で平面的なものに対し、三次元的な空間性を持たせているところが印象的です。横に流れる平面的な世界が、スクロールをすると急に奥行きのある「空間」に変化したり、各エリアの上をまるで「ラクガキ」するように飛び回る線だったりと、常識に縛られない、解放感、おどろき、ワクワクが伝わってきます。コンセプト設計のGoodpatchさんからステートメント、サイト制作のディテイルズさんへのリレーといい、プロジェクト全体にワクワク感しかありませんでした。

2. コクヨノヨコク / ブランドサイト

コクヨが行っているあらゆる実験や挑戦を「道具」「空間」「社会」「地球」という4つの切り口で紹介している、ハブ的なブランドサイト。文具の象徴でもあるまっさらなノートパッドの上で、コクヨが現在取り組んでいることが、おもしろかわいく3Dアニメーションで展開されていきます。

コクヨの未来への挑戦を語呂合わせで「ヨコク」に、未知のものへ向かう挑戦や発見を「!?」と、シンプルなワードや記号に集約させています。言葉は極めてシンプルなのに強い。また、3DCGのピクトグラムがかわいくて感情移入しちゃいます。サイトに流れる音楽もそうなのですが「なんだか心地よくて滞在してしまう」というのは、ひとつのサイトのあり方かもって思いますよね。こちらは、mountさんとTWOTONEさんがタッグを組んで制作しています！

3. Blue Blur (SIRUP) / 特設サイト

このサイトを見ていて感じたのは、動線設計やわかりやすさよりも「世界観そのものの体験」に重きを置いているということ。絶望や落胆という”Blue”な感情の中にもグラデーション"Blur"があるというEPのコンセプトが、SIRUPというアーティストの世界観を損なうことなく表現されています。ダイレクトに楽曲に飛ぶ前の不思議な空間だったり、写真構成色のカラーチャートを表示することでの、ブルーのグラデーション表現だったり、あらゆる技術を駆使した"Blue"と"Blur"の表現によって、見る人をSIRUPの世界観に引き込んでいきます。

なお、NEWPEACEさん、コクヨさんのプロジェクトが複数社、多人数での制作だったのに対し、こちらはtote incさんお一人で制作されてます（おそらく）。この大規模制作/少数での制作の違いを比較してみるのもまた、Webサイトを見る楽しみかもしれませんね。

4. 東野産婦人科

産婦人科ということで、グレートーンをベースにしたイラストレーションに気持ちが落ち着きます。スマホファーストで制作されているのですが、固定エリアのグラフィックが変化するので、PCで見ても遜色ないつくりですね。情報量が多い問題を解消するために、ターゲット別にカテゴリが整理されていたり、「お探しの情報が見つかりませんか？」という動線を用意することで、サイトのトーン同様、訪れる人たちにもやさしく作られています。「未来は、女性から生まれる」のコピーにもハッとさせられますよね。

5. ニンテンドーシステムズ / コーポレートサイト

サイトスクロールにあわせて、グロナビエリアのTypeScriptコードが動く。シンプルな構成ですが、募集している開発者に響くような演出がされていて、思いつきそうで思いつかないしてやられた感があります。「届けたい人にシンプルに届ける」ための作りで、東野産婦人科のサイトから続けて見ると、表現は違えど、ターゲットに対してシンプルに届けるための方法論としては近いのかも、と。ちょっと強引かもしれません。でもそう考えてみるのも面白いかもですね。

6. Let's Talk Gender

Tinderは「すべての人を歓迎する」ことを掲げ、プロフィールにも性的指向・性自認が選択できるようにしています。そのTinderがプロデュースした、ジェンダーやセクシュアリティ、ロマンティックについて学べる知識コンテンツが「Let's Talk Gender」。Tinderの理解促進という側面もありますが、Tinderをやらなかったとしても、文化認識のアップデートにはつながる。そこの視座がすばらしいと思いました。

また、「性は多様。出会いは無限。」のコピーですが、初見と二度目で印象が変わります。サイトのコンテンツを読んだ後に見ると、見ている世界が一気に広がるような気持ちになりました。このコピーはTinderのコンセプトにも接続していくのでしょうか。Tinderを新鮮な眼で捉えなおせる、秀逸なコピーだと思いました。

ちなみにこのサイト、最下部までスクロールすると、そのまま画面最上部につながります。「何度でも繰り返し学んでほしい」ということなのかもしれませんね。

7. Roaster / コーポレートサイト 

Garden Eightさんが制作するWebサイトは、デザインがとにかく美しいです。たとえば、ナビゲーションが10px程度のデバイスフォントで、コピーとのコントラストが目を引く。どの領域においても各種要素が互いを邪魔することなく共存できているのは、余白部分が入念に計算されているためでしょうか。他にも複数フォントの使われ方、写真の視差効果やスクロールアクションなど、見れば見るほど勉強になります。デザインが美しいからなのでしょうか、膨大なコンテンツ量の整理と動線設計にさえ、美しさを感じてしまいます。

8. DEMI DO / ブランドサイト

まず、モデルやプロダクトの写真、動画、コピーといった、素材の強さが目を引くかと思いますが、この「素材のよさ」を余すことなくWebのフィールドで料理されています。PRODUCTのカードの見せ方も素敵です。こちらのサイトはコンセプトムービーも面白くて、プロダクトの優位性をうたうでもなく、プロダクトのシズルを出すわけでもなく、ただただプロダクトで遊んじゃってます。これはコピーが「一生、この髪と遊ぼう。」だからですよね。

9. 渡辺ブルドーザー工事 / コーポレートサイト

まず、この写真、めちゃくちゃかっこよくないですか……！？青空に、富士山に、ブルドーザーです。ブルドーザーが使われた写真の中で一番うつくしいものを見た気がします。「富士山の景観を守り続けて50年」という言葉の裏付けがこのビジュアルひとつに集約されています。

「工事」のイメージを一新するようなロゴも印象的です。周辺では「ワタブルさん」と略称で呼ばれたりしていることから、WATANABE BULL DOZERを略してWTBLというロゴにしたり。Lがリッパー部分で、平らな線は更地かと思うのですが、更地までロゴに含めちゃうところも面白い・・・。まだ目に見えない、企業やブランドの本来持っている力をビジュアルに落とし込む。「ブランディング」ってこういうことなのかも、と思いました。

10. 多摩美術大学

大学のサイトというと「学校や人の雰囲気」というイメージがあるのですが、多摩美の新トップページでは、メインに学生の作品を置いています。このサイトを見て気づきました。実は入学希望者に一番見てもらいたいのは、現役生徒さんたちのアウトプットなのでは？と。そこには大学で学んだことの集大成がつまっているわけで。それは入学希望者が（本当に）見たいものでもあるはずですよね。入学までがゴールではなく、良い作品をつくることがゴールというか。見せるべきものをストイックに見せていくことに思い至った、制作サイドの考え方に共感します。この先の全体リニューアルも楽しみですね。

11. 月の輪自動車教習所

コンテンツ量が膨大がゆえに、ツイッターのTL的な構成にすることで、親しみやすく、読みやすくなるのでは、というところからこのようなデザインに。コンセプトの勝利ですね。YouTubeやSNSをうまく活用している「月の輪自動車教習所らしさ」もしっかり表現されているように思いました。

もしかしてこのサイト、必要な情報を必要な人に届けることとは別に、例えば在校生が面白いコンテンツをダラダラ見ていくことができるようにする（＝ツイッターのTL的にする）みたいな意図があるのかもしれません。いろいろと可能性を考えてみたくなるサイトですね。

12. ごせのね

奈良県御所市のプロモーションサイトです。サイト制作を担当されたADRIATICさん、ディレクション、編集を担当されたimatoさんはじめ、このサイト制作に関わっているほとんどの方が奈良在住の方です。このサイトの印象的だったところは、御所市の「まちの課題」を掲載しているところ。良いところだけではなく、課題点を目にすることで、第三者が観光視点ではなく、住民としての視点で、市を見ることができますし、また、その市の課題に対して、自分だったら何ができるだろう、という視点でも見ることができる。観光、移住だけではない、市への深い積極参加にもつながる可能性を感じました。

13. LAST LOVE - 山田和輝公式婚活サイト

4月に話題だったサイトといえば、こちらも忘れてはなりません。最終的に応募者は200名にのぼったそうで、Webサイトとしての役割はほぼ達成されたと言っても良いのではないでしょうか。Twitterでも「友達に勧めた」というコメントがちらほらあり、ただSNSで拡散されるだけではなくて、ダイレクトにターゲットへ届いているところがすごいです。

このサイトが面白いのは戦略部分で、結婚相手を探す（＝ゴール）のに、婚活アプリがたくさんある中で「個人の結婚募集サイト」を選んだところ。結婚相手を探すことにおいては、個人Webサイトって実はブルーオーシャンだったということ。

また、サイト制作側においても、メーカーや企業のサイトと違って「個人の結婚サイト」なので「自分だったらどう思うか」を考えやすい。ターゲット設定、どういうチャネルを使うか、どういうコンテンツにするか、SNSでの拡散をどう見込むか・・。こういうところから仮サイトを作って見る経験って意外と勉強になりそうですね。あと、ラストラブって、これ、もはやコピーですよね…！山田さんのおすすめが、映画の『First Love』で、そこからの「ラストラブ」という流れにも、グッときました。

しめのことば

4月の話題になったサイト、いかがでしたでしょうか…？今回もご紹介したいのに量的にご紹介できなかった実績がいくつもありました……。話題になっているサイトの中でも、なるべく色々な制作者さんの実績を紹介していけたらと思っております！また来月も、楽しみに待っていて頂けましたら、編集部一同うれしく思います。

それでは、また。iDID編集部でした！