.../articles/
心に残るウェブコンテンツ 2019.08

心に残るウェブコンテンツ 2019.08

2019.08.09

いつもS5-Styleとかhttpsterとかのギャラリーサイトをパトロールしている。ウェブギャラリーは見てて楽しい。特にhttsterはサイトに書いてあるステイトメント totally rocking websites というフレーズもかっこ良くて好き。

Httpster is an inspiration resource showcasing totally rocking websites made by people from all over the world.

そんな僕の思うrocking websiteを紹介します。


The Apollo 11 Moon Landing in Augmented Reality

imgThe Apollo 11 Moon Landing in Augmented Reality - The New York Times

英語なので詳しいことまで解説することはできないけど、NYTimesの特集ページ。Visual Stories and Graphics というまとめが毎年作られるんだけど、その中の1つだと思う。NYTimesはカテゴリが膨大すぎて見つけるのが難しい。 このシリーズ(?)のサイトはどれも見応えがあって楽しいのでおすすめ。

見つけたのも結構前だから公開されたのがいつなのか分からないけど、「月面で写真撮るのどうよ?」というこのツイートを見る限り7月頃なんだろうか。

スクリーンショット 2019-08-08 18.27.35

アポロ11号の月面へのタッチダウン以降のヒューストンとニール・アームストロング船長のやりとりが courier というタイプライター用に作られたフォントで綴られる。

読み流してしまうテキストの間に入ってくる写真が、当時どんな意図でどのように撮影されたかがアニメーションによって分かるように誘導されているのがとても丁寧で良い。

さらに進めていくと、スクロールされるテキストの背後からアポロ11号の3Dモデルと月面、白枠が浮かび上がる。 平面上で取っていたリズムに奥行きが加わって一気に引き込まれる。

スクリーンショット 2019-08-08 18.29.46

スクリーンショット 2019-08-08 18.31.00

実際に月面で撮影された写真を見ながら、アポロ11号の船員達とヒューストンとのやりとりが流れていくというシンプルな情報の構成ながら、静かな宇宙の中で起こる人類の大きな一歩がドラマチックに感じられる。 スマートフォンでも見れるし、NYTimesのアプリが入っていれば、スマホの向きに応じて写真を見れるAR的な演出もある。


このコンテンツで最もすごいと思うところは、使っている情報の少なさと無理のなさ だ。 会話と写真のみで世界観を作り、見ているユーザを引き込む演出がとても心地良い。 あれもこれもと情報や演出を詰め込まず、少ない工夫を最大限活かしている。 三次元的な動きで写真を背景と一致させる工夫を、淡々とした会話の中に入れることで、技術そのものが主役にならず、あくまでアポロ11号の船員達の偉業を称えるストーリーを作っている。

白枠を先に表示しておいて、そこに写真が表示されるUIとか、ユーザを混乱させずにスムーズにコンテンツに集中させるための小さい工夫が気が利いている。

スクリーンショット 2019-08-08 18.46.38

やりたかったからそうした、という作り手側のエゴが感じられないのに、出来上がっているものにはそのこだわりが感じられるっていう良さがあって好きなコンテンツです。

技術とデザイン、それらをまとめる演出や編集がすごく自然にできあがっているのが良いね。

過去のページを見るには課金が必要なので、Twitterアカウントをフォローして見逃さないようにチェックしときたい。手のこんだ作りきり記事ページも作ってみたいな。

written by

.../article/

Articles

記事

経営層・リーダーのための生成AI活用 〜自走型DXのためのアプローチ〜

経営層・リーダーのための生成AI活用 〜自走型DXのためのアプローチ〜

生成AIを活用して、経営者やリーダー自身が課題抽出・打ち手検討を行える体制を構築する。 弊社が提供する“伴走型支援”と組み合わせることで、DX推進の質とスピードを飛躍的に高める方法をご紹介します。

AWS AmplifyにmonorepoのNext.js(App Router)をデプロイする

AWS AmplifyにmonorepoのNext.js(App Router)をデプロイする

monorepo管理しているNext.jsをAmplifyにデプロイしようとした際にいくつか躓く内容があったのでまとめておきます。

Laravel 日本一解りやすい全文検索のマイグレーション記載方法解説

Laravel 日本一解りやすい全文検索のマイグレーション記載方法解説

Laravel + MySQLで全文検索を実装する

リモートワーク・オンライン会議でも、スムーズに制作を進めるために大切なこと[資料編]

リモートワーク・オンライン会議でも、スムーズに制作を進めるために大切なこと[資料編]

コロナ禍の影響により、リモートワークの導入をおこなっている制作会社も多く、実際に弊社でも導入しています。

売れるECサイトデザインを作るために。参考にしたいおしゃれな事例の探し方。

売れるECサイトデザインを作るために。参考にしたいおしゃれな事例の探し方。

売れるECサイトのデザインは、「この形式」という決まりはありません。ECサイトで売り上げを上げるなら、しっかりとしたコンセプトと、コンセプトを決定するまでのリサーチが必要です。

Figmaでデザインのコミット履歴を残せるプラグイン【Thought Recorder】をリリースしました

Figmaでデザインのコミット履歴を残せるプラグイン【Thought Recorder】をリリースしました

Figmaを利用するWebデザイナーの助けになれると嬉しいです。使い方は本記事をご覧ください。

制作会社の考える、業務効率化ツールのおすすめ。個人でも使いやすいサービスなど。

制作会社の考える、業務効率化ツールのおすすめ。個人でも使いやすいサービスなど。

新型コロナウイルス感染拡大の影響で、リモートワークが主流になり、弊社でも週のほとんどは各自宅で作業をしています。

ECの構築方法、おすすめのECサービス。

ECの構築方法、おすすめのECサービス。

ファッションや家電、スーパーの買い物でさえもECサイトを利用することが当たり前になりました。加えて新型コロナウイルスの影響もあり、弊社にも「どんなプラットフォームを利用したら良いか」「どれくらいコストがかかるのか」などECに関するさまざまなご相談を頂きます。

Laravelのオブザーバーが便利だった

Laravelのオブザーバーが便利だった

オブザーバーを使って、モデルのCRUDイベントキャッチしようという試み

DX(デジタルトランスフォーメーション)の全体像をざっくり解説

DX(デジタルトランスフォーメーション)の全体像をざっくり解説

もはやバズワードと化したDXという言葉ですが、実際何を意味しているのか? どのようなことをしたらいいのか? といったことを相談されるようになってきたので、DXをイメージするための全体像をざっくり解説します。

すべての記事

お問い合わせ