みなさんこんにちは。雨森です。
えげつないほどたくさん案件が同時に進んでおり、いつにも増してテンヤワンヤ
(たくさんのお客様からご発注いただけていることはありがたいことです!)で、
あいも変わらず公開日の前日に、ヒィヒィ言いながらこのコラムを書いております。
さて、先ほど配信されたメルマガで紹介した通り、昨年から動画の配信にも少しだけ力を入れているアイタイス。
YOUTUBEでは『あめやん、これどうなん!?』という
スタッフからの質問にアドリブで答えていくコンテンツや……
『雨森武志のきほんルール100』という、
僕が自分自身に課しているルールを説明していくコンテンツを上げております。
そして昨日、また新しいシリーズをスタートさせました。
その名も『アイタイスのクリエイティブ徹底解説』。
この企画は、これまでにアイタイスで担当した案件が、どのような経緯で始まり、
制作時はどんなことを意識して、どのようにして納品に至ったかまでを、
クリエイティブの視点から振り返っていくというもの。
昨日に収録をして、そのまま公開した記念すべき1本目は、『Webデザイン』のカテゴリから
『O-DRIVE powered by 追手門学院中・高等学校』(以下:『O-DRIVE』)を選びました。
アイタイスのメインWebデザイナーとして活躍していくれている『お兄やん』に登場してもらっています。
ということで、今日のコラムは、上の動画で話されている内容と重複する部分はありますが、
動画はすこし長くて、すべて見るのは大変ということもあるので、
『O-DRIVE』が、世の中的にどのように見られているかを紹介してみたいと思います。
※コラムのネタを見つけられなかった感がすごい!!(苦笑)
Twitterにて
まずはTwitter上で『O-DRIVE』について言及されているもの、
いくつかピックアップしてみましょう。
はじめはデザイン的な観点でツイートしてくれている方から。
https://t.co/R1fdBKYopt
これすごい!Webには珍しい詰め気味の字詰めと行間で、男性誌ライクな画面になっている…!— まるみ@育てるデザイナー (@nicoicon_design) March 16, 2021
『まるみ@育てるデザイナー』さん、ありがとうございます。
他のツイートでもありますが、文字間・字詰めは今回のデザインのポイントの一つ。
動画でもそれに関する話をしています。ぜひご覧になってください。
https://t.co/zHsSPnav0n
NotoSansの太字を多く使い、強くてポップな印象があるが、モノトーン配色にし、中高生のカメラ目線のトンマナが統一されたクオリティの高い写真によって、かっこよく真っすぐな印象を受ける。#1日1サイト見て簡単に分析 No.56— arikeni (@arikeni) March 17, 2021
今回はこちら。
フォントを太めに字間と行間を詰めると熱意あふれる雰囲気になるなあと感じた。写真や文章による影響もあるのかもだけど。あとサムネイルにカメラ目線が多いというのもポイントなのかもしれない。https://t.co/sQW4rN9jON pic.twitter.com/lSrOHXqZQr— Katsuya Yamazaki (@katsuya84y) March 18, 2021
こちらも同じくフォントの話と、写真に言及していただいております。
『arikeni』さん、『Katsuya Yamazaki』さん、ありがとうございます。
写真に関して、またレイアウトに関する話も動画の中でわりと詳しめにしております。
#まいるどしゅがーの気になったサイト
前にも投稿したけど自分のストック用に改めて。
サイズ感の強弱がこの上なく絶妙なのと、文字周りの調整や写真のトーンの統一感にきめ細やかさを感じる。良い意味で教育系のサイトっぽくない今風っぽさ&大胆さでいながら丁寧な作り。https://t.co/imrEsLfG1W— まいるどしゅがー/アラサーデザイナーのインハウスな日々 (@whispervoiceday) July 26, 2021
『まいるどしゅがー/アラサーデザイナーのインハウスな日々』さん、ありがとうございます。
「良い意味で教育系のサイトっぽくない今風っぽさ」とありますが、まさにそこは狙った部分。
制作のスタート時に、クライアントの担当者とまさにその話をしたというくだり、動画の中にあるはずです。
#サイトレビュー #webデザイン
No.21
◾️O-DRIVE
🔰情報系サイトのレビューは初
・全体の印象は、余白少なめ、文字が多い、文字の大きさのメリハリ。たくさんの情報が入りやすい👀
・白黒赤で可読性高い
・新しいトピックはNEWの文字🆕
・メニュー内は写真メイン、文字小さめ https://t.co/OHoFMmYLkO— あめちゃん🍭 (@ame_challenge) September 8, 2021
『あめちゃん』さん、ありがとうございます。どうでもいい話ですが、
僕も小学校の時、一部の友達から「あめちゃん」と呼ばれていました。(基本は「あめやん」)
ツイートにある「余白少なめ」「たくさんの情報が入りやすい」といった部分も、
まさに動画の中で説明されている通りです。こちらの狙いが伝わっているのは、嬉しいですね。
てな感じで、探せばまだあるはずですが、いったんデザインに関するものはこれくらいに。
実際にWebデザインに関わっている方が、ピックアップしてくれているのは嬉しい限りです。
続いてメディア全体について言及してくれているツイートもいくつか。
素敵なメディアサイト(1)
O-DRIVEhttps://t.co/xTjFk8ZFc7
学校教育や子どもたちの今を発信する中学高校のメディアサイト。先生や学生たちがここまで露出したメディアは初めて見ました。子どもたちの生の価値観を知り、教育の概念をアップデートしていくことができそうな、素敵な取り組み。 pic.twitter.com/1BfUa5Ic7C
— 田渕 将吾 (Shogo Tabuchi) (@shogoTabuchi) December 28, 2021
Webの業界では知らない人はいない(は、言い過ぎかな?)存在、
『田渕 将吾 (Shogo Tabuchi)』さんのツイート。これはめちゃめちゃテンションが上がりました。
「なぜ学生たちにフォーカスするのか」「そのメリットはなにか」といった話は、動画の中でしていると思います。
追手門学院中高の探究科のWEB。生徒さんの個性をここまで全面に押し出す広報ができるとは。オウンドメディアとしての完成度がすごい。https://t.co/3yYoexHZ3E pic.twitter.com/1JAarc2jKL
— 今村亮 (@ryo_imamura) January 19, 2023
デザインギャラリー徘徊タイム〜👼🌙
私立の中学・高校のwebサイト🎓Z世代とやらをメインターゲットにしてるけど流入フローは変わるのかなあ🤔
先生や生徒など「中の人」についての記事がメインなのはどういった背景かなあ🤔
などなど興味深々なサイトでした!https://t.co/E3BeHUCVbD
— KIRIKO🌸 (@kirikooo_design) May 1, 2021
これも同じく「学生を全面に出す」というメディアのあり方を
評価していただいたり、そこに興味を持っていただいたり。
『今村亮』さん、『KIRIKO』さん、ありがとうございます。よかったら動画を見てみてください。
中学高校のホームページでまるで大手広告代理店がやるような本格的なオウンドメディアやってて驚愕。
生徒、先生、プロジェクト、対談をWebコンテンツ化することで自然流入集客を半永久的に可能にする。
予算の少ない教育業界こそオウンドメディアでマーケティング・集客の資産化が必要だと思う。 pic.twitter.com/DR7wjVZH11
— 林 諒|フィットネスDX (@ryo_hayashi) April 14, 2021
続いては『林 諒|フィットネスDX』さんのツイート。
「大手広告代理店がやるような本格的なオウンドメディアやってて驚愕。」と
お褒めの言葉をいただいております。
ただ、動画の中でも話していますが、大手広告代理店どころか、
基本的には運用しているのは、僕ひとり(笑)
それに関しては、ぜんぜん褒められることではないですけどね。
本来はもっとリソースを割いて、きちんと運用体制を整えるべきなので。
「生徒、先生、プロジェクト、対談をWebコンテンツ化することで自然流入集客を半永久的に可能にする。」
このあたりは運用側の狙いを的確に読み取ってもらえております。すごく嬉しいですね。
追手門学院中・高等学校の探究科が運営するメディア「O-DRIVE」がめちゃめちゃカッコいいし、内容も面白い。
✅ 探究学習のプロジェクト
✅ 生徒インタビュー
✅ 先生のコラムこれ、先生と生徒だけで運営しているんだろうか…。 pic.twitter.com/XJLIPASJmd
— 吉川佳佑 🧑🏫 アントレプレナーシップ教育@ガイアックス (@Yoshikawa_says) April 16, 2022
最後にこちら。『吉川佳佑 🧑🏫 アントレプレナーシップ教育@ガイアックス』さんのツイート。
「めちゃめちゃカッコいいし、内容も面白い。」と書いてくれています。嬉しいですね。
「これ、先生と生徒だけで運営しているんだろうか…。」とありますが、答えは当然「NO」。
外部の運用チームとして、我々がお手伝いさせていただいております。
ただし、現場の先生たちによるコンテンツの投稿もあります。
メディア・ブログなど
Twitterの次は、その他のメディアやブログで『O-DRIVE』がどのように紹介されているかを見てみましょう。
これも探し出すとけっこうな数があると思うので、一部だけ。説明の文言をそのまま引用させていただきます。
LIGさま
デザインを通じてブランド力を上げた10のWebメディア
追手門学院中・高等学校「探究科」が、教育内容や子どもたちの成長プロセスを発信するメディアサイトです。コントラストの強い写真と太いゴシックの見出しがとても印象的なデザイン。
学校が運営しているメディアで、これだけ写真に力を入れているのはかなり珍しいのではないでしょうか。ど真ん中のストレートを投げ込まれているような気持ち良さを感じますし、きっと入学を検討されている学生の方にとっても、一つひとつが興味を引くデザインになっているのではないでしょうか。
こちらはもはや説明不要の存在、LIGさまの公式サイトより
ここで取り上げられたのも嬉しかったですね。
デザインのポイントに関して、また写真にチカラを入れている理由などは動画内で説明しています。
MUDALOGさま
【月報】Webデザイナーの振り返り【2021.04】
オウンドメディア作成時に参考にさせて頂いたサイトです。大阪にある高等学校の学科のオウンドメディア。
太いゴシックと大きな見出し。メディア系には珍しい字詰めと行間はみた瞬間圧倒されました。生徒や先生の素材もキマっててかっこいい。ここに行きたくなるな・・。
トップページの見せ方や、hoverやactive時の参考にしました。
こちらはタイトルにある通り、Webデザイナーさんのブログから。ありがとうございます。
「ここに行きたくなるな・・。」というお言葉、単刀直入に、最高です。
最終的には集客に結びつけるのが大目的なので。
MUKOLOGさま
【2022年4月】参考にしたい大学・高校・幼稚園のWEBサイトデザイン 7選
追手門学院中・高等学校の紹介的なサイト。メディアサイトのような作りです。サンセリフ体が印象的なデザインで、かなり手が込んでいる印象です。制作側の人間からすると、インタビュー、撮影、記事作成など、かなり大変な作業だと思います。別途、追手門学院中・高等学校のWebサイトも用意されています。
こちらも実際にWebの制作をされているクリエイターの方のブログだと思われます。
ここでのポイントは「制作側の人間からすると、インタビュー、撮影、記事作成など、かなり大変な作業だと思います。」と、
制作チームへと思いを馳せていただいている点。とても優しい方ですね。
はい。かなり大変です(笑)。そして上にも書きましたが、基本的には私ひとりでやっております。
【2022年4月】参考にしたい大学・高校・幼稚園のWEBサイトデザイン 7選
NASU-MEDIAさま
フッターがダサいWebデザインはクソだ。
この潔いフッター、気持ちが良いですね。
O-DRIVEのWebサイトは、白と黒の強いコントラストが特徴で、写真とタイトルが規則性を持って並んでおります。レイアウトも非常にシンプルで、サイトを訪問したユーザーは、なにも考えずにスクロールするだけで様々な種類の記事を選ぶことが出来ます。
そういった、流れを意識してフッターからも無駄な情報は排除して、テキスト + 写真でサイトマップの機能をもたせた構成になっています。一見、簡単に作られているようにみえるかも知れませんが、シンプルなデザインこそ垢抜け感とわかりやすさを表現するのが難しいです。
サイトを一番下までスクロールしてきたユーザーに対してのアプローチがとても素敵ですね。
そして、Webデザインの流れを意識してスマートフォン表示では写真が3列になっております。そうすることで、フッターの高さも短くなり、一画面の中でMENUをすべて表示することが出来ます。
こちらは「フッター」という、割とニッチな部分にフォーカスして、しっかりと論じられているブログです。
その中で「痺れるフッター」として、『O-DRIVE』を紹介していただいております。ありがとうございます。
動画では少しだけですがフッターの話もしております。
エヴォワークスさま
日本語がすてきなWEBサイト
社内のデザイナーで話題になったサイト。「この文字詰とサイズ感、なかなか出来ないよね(笑)」力強いフォントの使い方がサイトのトンマナをがっちり作ったデザインです。Noto Sansは定番で使うwebフォントですが、こうやって使うと全然印象が違いますね。
最後はアイタイスよりぜんぜん立派なプロダクション「エヴォワークス」さまのブログより。
「社内のデザイナーで話題になった」とあります。やはり同業者の目に留まるのは嬉しいですね。
フォントに関しても、動画の中で少し話をしていると思います。
エヴォワークスさま、ありがとうございます。
はい、今日はここまで。
はい、ありがとうございます。ネタ不足&時間がなくて、動画の補足的な内容にしかなりませんでした。
そんな中で、もう少しだけ動画の話しをするのであれば、
実際にこの『O-DRIVE』というメディアの運用を3年ほど続けた上で、
僕が感じた課題や想定していなかったこと、展望なども最後に話しております。
教育関係者の方、オウンドメディアに興味がある方は、ぜひ。
ではまた。
Editor’sNote
五反田に小さなオフィスを構えるブランディング&クリエイティブカンパニー、アイタイスの代表です。