“Where should we eat tonight?”
私たちは、ノースカロライナ大学のダイニングサービスチームと協力して、モダンなダイニングロケーションWebサイトを再構築し、ついに学生がいつ、どこで何が提供されるかを知ることができるようにするという羨ましい機会を得ました。 Aramark社およびUNCのITサービス部門と協力し、1つだけでなく2つのカスタムWebアプリケーションを使用したWebサイトを構築しました。 現在、学生、教職員はキャンパス内のすべての食堂を閲覧し、どの食事ステーションがオープンしているかを一目で確認することができます。 そして、ワンクリック（またはタップ！）でメニューや各アイテムの原材料を確認することができます。 シンプル！
この大規模で複雑なプロジェクトを成功させるには、現場のマネージャー、オリジナルのデザイン、洗練されたフロントエンドのコーディング、印象的なバックエンドのプログラミングのすべてがうまく連動する必要がありました。 つまり、理想的なニューメディア・キャンペーン・プロジェクトだったのです。 私たちは、大学向けのカスタム アプリやWeb サイトを数多く手がけており、UNC のエネルギー サービス、地質学部、起業家精神副専攻なども含め、このプロジェクトは私たちの得意分野でした。 さらに悪いことに、食事代を払ったのに、特定の食事制限のために利用できるオプションがないことに気づいたのです。 だから、私たちはUNCダイニングが解決したい問題をよく理解していたのです。 Web サイト、カスタム メニュー & 時間 Web アプリケーション、そしてライブ メニュー画面用の 2 つ目のカスタム アプリです。
Web サイトは、若いユーザー向けに非常にモダンな外観で、メンテナンスが簡単で読み込みが速いことが必要です。 これは、高速で無限に設定可能なコンテンツ管理システムである HiFi を使用して構築されています。 メニュー & の時間帯アプリについては、UNC チャペル ヒルの学生、スタッフ、教員に対する次の 3 つの質問に答えることが主目的であると、すぐに判断しました。
最後に、私たちはユーザーの体験を最後まで見届けたいと考えました、つまり、実際の現場のメニューと結びつけました。 UNCの食堂には、現在のメニューを表示する大きなLCDスクリーンがあります。 このスクリーンをカスタムディスプレイのプライベートWebページに接続することで、サイト管理者がWebサイトと同じように簡単に各ステーションのコンテンツを更新できるようにするのが、私たちのソリューションです。 また、各画面が各ステーション、食堂、そしてUNC Diningというブランドのスタイルにマッチするよう、とてもシンプルに仕上げました。 メニュー画面アプリは Scala プログラミング言語で構築され、魅力的に動作します。
3 つのコンポーネントすべてを結びつけることによって、UNC Dining Services チームに、「夕食に何が出るか」という質問に答えるために必要なソリューションを提供することができました。 その結果、超高速で、使いやすく、理解しやすい、まさに機能するWebサイトが完成しました。 3762>
Part 1: The Web Site
Managing Content
最初の優先事項は、古いサイトの既存のコンテンツを監査することでした。 何が残り、何が去り、何が改善されるのか。 元の情報アーキテクチャはうまく設計されておらず、クライアントが管理する必要のあるさまざまな種類のコンテンツがありました。 このサイトのコンテンツ・テンプレートは以下の通りです。
- 会社概要、栄養成分、ケータリングなどのシンプルな情報ページ
- ニュース ブログやイベント カレンダーなどの複数のアイテムを含む情報フィード
- ミール プランなどの専門ページ
- 対話型のフォーム。 もちろん、メニュー&時間アプリ
新しいサイトの情報デザイン部分で難しかったのは、深く入れ子になったコンテンツをどう扱うかということでした。 情報がグループ内でグループ化されていることがあり、そのためにナビゲーション メニューが乱雑になり、速く、使いにくくなることがあります。 例えば、メニューや時間帯のアプリを例にとると、5つの粒度の情報が連続して扱えるように画面インターフェースを設計する必要がありました。 場所（「ラムズヘッド食堂」）、食事（「ランチ」）、ステーション（「ピザバー」）、料理（「バッファローチキン」）、原材料（「小麦粉」）まで、5つの細かな情報に対応する必要がありました。 複雑だと思われるかもしれませんが、その通りです。
HiFi ソリューション
私たちのソリューションは、メニュー アプリのツリーをすべて掘り下げ、適切な場所にコンテンツ ページを更新および作成することを容易にする必要がありました。 また、HiFi を使用して Web サイトを構築したので、これらの各コンテンツ テンプレートがデフォルトで含まれているため、簡単です。 ニュースブログ、イベントカレンダー、コンタクトフォーム、基本情報タイプはすべて含まれています。 コントロール パネル内では、ナビゲーション階層が明確で、さまざまなコンテンツ タイプのそれぞれをボタンをクリックするだけで簡単に追加できます。
このクライアントでは、メニュー情報の更新、今後のイベントの掲載、スタッフのプロファイルの更新、食事の計画方法や特定のアレルギー物質を避ける方法などの学生向け特別ガイドを作成するのに、HiFi を使用しています。 UNC Diningは、教育であると同時に学生に食事を提供することでもあります。管理栄養士が雇用され、UNC Campus Health Servicesと連携して、食事が健康に良いことを確認し、特別な食事のニーズを持つ学生の相談にのっています。 学業での成功は、良い栄養と健康的なライフスタイルと密接な関係があるので、サイト管理者がこのサイトを使って、正確でタイムリーな&実用的な栄養情報を公開できることは重要です。
デザインのアプローチ
古いデザインは、私たちが再設計を依頼した Web サイトに見られる典型的な欠点に悩まされていました：
- レイアウト グリッドがない：ページ要素の配置やサイズが無秩序
- 視覚的階層が低い：どこに視線が行くべきか不明、見出しは本文と見分けられない
- 明らかな行動喚起がない。
- 空白の欠如: テキストとコンテンツボックスは、視野の中で区別できるような「余裕」が必要です。)
- Sloppy typography: プレーンでデフォルトのフォントを使用している以上に、平均的な行の長さと段落間隔が読みにくくしている
以前 & 以降。 旧サイトはスペースをうまく使っておらず、訪問者が最も関心のあるタスクやコンテンツに焦点を合わせていませんでした
その上、旧サイトは読み込みが非常に遅く、モバイルデバイス用に最適化されていませんでした。 私たちの課題は、これらのデザイン上の考慮点のそれぞれに対処するだけでなく、主要な読者層である現代的で若々しい人々にふさわしい方法でそれを実現することでした。 その結果、このような特徴を持つデザインモチーフが生まれました。
- 大きく大胆な見出し
- 明確なコールトゥアクション
- シンプルでモダンな形状（四角と長方形）
- 不必要なシェーディングやテクスチャはない
- 自由なホワイトスペース
これらの他に、以下の特徴があります。 私たちのチームは、コンピュータのプログラムやアプリケーションが画面全体を使いこなすように、画面上で快適に使えるインターフェイスを設計しました。 新しい UNC Dining サイトは、ワイドスクリーンのデスクトップ モニターでも、ラップトップ、タブレット、または携帯電話でも、自然に違和感なく表示されます。 セクションとテキストは、明確でよく定義された階層構造を持っています。 個々のニュースや記事は、じっくりと読むのに心地よい。 どのような画面であっても、横幅いっぱいにデザインされている。 カロライナ色とグレーを基調としながらも、高精細でカラフルな写真を大きく配置し、バランスよく配置。 ナビゲーションは整理され、インタラクティブで、必要な時以外は隠されています。 また、微妙なアニメーションで、レスポンスの良さと気まぐれさを表現しています。
Driven by Action
New Media Campaignsは「Action Driven Design」と呼ばれる哲学を採用しています。 これは、「どのように見えるべきか」という典型的な質問を「何をすべきか」に反転させることで、すべてのウェブプロジェクトにアプローチすることを意味します。 これにより、サイトを訪れた人がどんな行動をしようとしているのか、注意深く考えなければならなくなるのです。 そのためには、サイトの最も重要な目的を1〜3個に絞るのが簡単です。 UNC Dining の場合、それは明確でした。
- 何が開いていて、何が食べられるか？
- 最近の予定は？
- 食事プランは何をカバーしているか？
そこから逆算すると、3つの行動すべてがホームページで最も重要な視覚要素で、ほとんどの訪問者が興味を持っているものだとわかるでしょう。 しかし、その先には、食事プラン、ケータリング、さらには UNC Dining の持続可能性への取り組みなど、豊富なサイト情報があり、これらはすべて対話型のメニューから簡単にアクセスできます。 クリックまたはタップすると、サイトのすべてのコンテンツに一目でアクセスできます。
Social Media
UNC Dining は、そのコミュニケーション チャンネルに真剣に取り組んでいます。 そのため、このような「曖昧さ」があるのです。 つまり、フォロワーは、どのメディアを利用しても、一貫した編集体験を得ることができるのです」
ホームページでは、3 つのプラットフォームすべてからライブ フィードを取り込みました。 FacebookとTwitterの最新情報はテキストで、Instagramの最新情報は大きく高画質な写真で、それぞれ取り込んでいます。 これは、メディアチームの努力を補強すると同時に、トップページに新鮮でオリジナルな魅力的なコンテンツを提供する素晴らしい方法です。 食欲をそそる食べ物の写真があるに越したことはありません！
手作りのコード
すべてのNMCのWebプロジェクトと同様に、コードは手作業で書いています。 このため、無駄のない簡潔なコード（ページの重さを増すような不必要なマークアップをしない）で、検索エンジンのインデックスにサイトのページを最適化することができます。 また、圧縮してキャッシュすることで、ページのレンダリング時間を劇的に短縮し、ブラウザ固有の表示バグ（Internet Explorerは有名な問題です）を回避することができます。 最後に、UNC Dining は、ラップトップ、タブレット、携帯電話だけでなく、巨大なデスクトップ・モニターでも同様に機能します。メニュー & 時間アプリでも、タッチやスワイプすると、正確な情報が即座に反応します。
パート 2: メニュー & 時間のウェブ アプリケーション
UNC Dining は、ある質問に答えるために設計されたウェブ アプリケーションを特徴としています。 “お腹が空いた。 キャンパスで何が食べられますか？ 私たちは、Ruby on Railsを使用して、即座に、そして自動的に、いくつかのことを行うカスタムソフトウェアを設計し、構築しました。
- Fetch the current time
- Check the time against a database of all eating locations throughout UNC campus
- Return a list of what’s open right now
- Display the current… (現在営業中のお店のリストを返す) 1246>
- Each menu items features full nutrition details & allergen information at glance
その機能だけなら大成功でしょう。 しかし、タイムラインに沿ってマウス (または親指) をすばやくドラッグすると、スライドさせたときに、変化する時間やオプションが遅延なくリアルタイムに表示されます。 だって、今日の夕食に何が出てくるか気になるでしょ？ そんなとき、インスタント・カレンダー・ピッカーがあれば、来週の朝食の献立をすぐに知ることができます。 また、場所自体のドロップダウンメニューから、複数の食事時間を選択することもできます。
特別な食事が必要ですか？ そのような場合にも、私たちは、あなたをカバーしています。 このような場合、「ディアボロス」は、「ディアボロス」を「ディアボロス」と呼びます。 これらのアレルゲンが含まれる食材は、グレーで表示され、取り消し線が引かれます。 アレルギーを持つ人にとって最も良いことは、アプリが訪問するたびに選択を記憶するので、毎回選択し続ける必要がないことです。
Usage Data
まだ数週間ですが、学生が新しいアプリを発見し、急速に普及しているのを目撃しています。 新しいウェブサイトとアプリを立ち上げてから、アプリの使用率は毎週増加しています。 UNC Dining との継続的な関係の一部である、新しいデザインがどのように機能するか、今後も注視していきたいと思います。 これは、特定のダイニングホールの各ステーションに設置された高解像度LCDテレビ画面によって実現されています。 UNCのITスタッフと緊密に連携し、ライブのWebフィードを取り込み、すべてがうまくかみ合うようにしました。 私たちの目標は、スクリーンを Web サイトの他の部分と同様に簡単にメンテナンスできるようにすることですが、マウス カーソルのようなものが表示されて錯覚を起こさないように、カスタマイズされたディスプレイを使用することでした。 このセットアップの大きな改善点の 1 つは、Scala で許可されている柔軟性のないテンプレート内で動作しなければならない古いスクリーンでの大量のデザイン制限をなくすことでした。 しかし、基本的なセットアップを変更し、Scalaのテンプレートを使用する代わりに、各画面をユニークなURLで指定するだけで、モダンブラウザの柔軟性を活用し、画面デザインに工夫を凝らすことができるようになったのです。 現在、各スクリーンはユニークなURLに設定されており、UNCは新しいレイアウトで最新のWebテクニックとデザインの柔軟性を活用することができます
Only NMC
このようなプロジェクトを成功させられるWeb会社はそう多くはないでしょう。 UNC Dining の新しい Web サイトとカスタム アプリケーションの成功は、New Media Campaigns があらゆる Web プロジェクトで発揮する独自の強みを示す好例です。
高等教育機関特有のニーズに精通していることに加え、このプロジェクトでは、熟練のクライアント担当チームが実際に調整し、熟考されよく構成されたコンテンツ戦略 & 情報アーキテクチャ、大胆でオリジナルかつ効果的なアクション主導型のビジュアル デザイン、応答性に優れ無駄のない、専門家による HTML & CSS ハンドコーディング、複雑でカスタムのバックエンド プログラミングを行うことが要求されました。 その結果、非常に速いロードタイムで、予算内に納品され、絶賛されました。
UNC Diningのサイトで私たちのデジタル技術を披露する機会を得ることができ、クライアントはこれ以上ないほど感激しています。 NMCはどのようにあなたをワクワクさせることができますか？
ご連絡をお待ちしております。