今回は結果発表です！
完全無料のコミュニティとして運営している独学応援サロンですが、無料だからといって何の企画もなければメンバー同士の接点を増やせないよなぁということではじめてみたデザインとコーディングのコンテスト企画。
毎月一回ずつ実施することで駆け出しのみなさんに「制作例」と呼べるものを増やしてもらい、営業をはじめるときの武器を蓄えてもらえたらと思っていますが、今回は記念すべき第1回デザインコンテストの審査結果を発表します。
まずは今回のお題から確認していきましょう。
今回のお題
今回のお題は「ページ構成まで決まっている沖縄の高級ホテルのホームページのリニューアルデザイン案を考える」です。
ディレクションはある程度進んでいるので、デザインをする上ではホテルの特徴やユーザーの操作性をどれだけ具体的にイメージ・表現できているかがポイントになってきますね。
また、今回は制作期間の短さからトップページのみの提出も可としましたので、比較するのはあくまでトップページだけになります。
ただし、実際にご自身の制作例としてポートフォリオに載せるときは下層ページまで作ってもらえたらと思いますので、参加者のみなさんにはそのつもりでいてもらえると幸いです。
審査方法
肝心の審査方法ですが、こちらはサロンメンバー達による一般審査の点数とサロン主である僕による5段階評価を足したその合計点を競っていただきます。
まず、メンバーたちによる一般審査は、ひとり1ポイントとして換算。
その際の選ぶ基準はなんでもOK。
- このデザインは真似したい
- このデザイナーさんと仕事がしたい
- このデザインをコーディングして自分のポートフォリオに載せたい
などなど色んな理由が考えられますが、とにかくどんな理由であっても1点は1点として加算します。
また、僕の方はWebデザインにおいて大切な要素として下記の５つを審査させていただき、5点満点で採点します。
- 目的とコンテンツの一致
- ページの目的やクライアントの要望に合わせてデザインされているか？コンテンツが明確で、ユーザーが求める情報を簡潔に伝えることができているか？
- ユーザビリティ
- デザインが使いやすく、視覚的にわかりやすいか？ナビゲーションの明瞭さ、情報の整理、読みやすさなど、ユーザーがサイトを快適に利用できるか？
- 視覚的な魅力
- カラーパレットが適切か？色の組み合わせが調和しているか？フォントや画像はユーザーに良い印象を与えられるか？
- レスポンシブデザイン
- デザインはモバイルフレンドリーか？
- CTA
- ページの目的がユーザーに特定のアクションを促すことであると理解しているか？コール・トゥ・アクションが明確で、目立つ位置に配置されているか？ボタンのデザインや文言は適切と言えるか？。
以上を踏まえて、今回エントリーいただいた作品を審査させていただきました。
ちなみに、それぞれのコメントでは率直な感想を書いています。
真面目に捉えすぎて傷ついたりしてほしくないなぁと思いつつも、それぞれのさらなるパワーアップのためにあえてオブラートに包むことを忘れてバカ正直にコメントしてますので、その点はご理解いただけると幸いです。
それでは、結果を見ていきましょう！
エントリー作品
エントリーくださった3名には感謝しかありません。
今回も無事にコンテストを開催できたのはみなさんのおかげです。
また、そんな3名の作品に投票してくれたサロンメンバーたちにも感謝が尽きません。
これからも毎月の定番として継続していきますので、よろしくお願いしますね！
それでは、みなさんの投票数と僕のバカ正直なコメントをご覧ください👇
①amさん
審査結果
◆合計得点：11.5点！
◆一般審査：8点！
◆5段階評価：3.5点！
| ① | ② | ③ | ④ | ⑤ |
|---|---|---|---|---|
| 0.5 | 1 | 1 | 1 | – |
◆コメント
このコンテスト企画を検討してたときに「参加してほしいデザイナーさん」として想像していたamさん（そろそろ名前を統一してほしいｗ）。
満を持して参加してくれましたが、さすがのセンスに脱帽です！
今回は沖縄の高級ホテルのホームページですから、まずはリゾート感とラグジュアリー感の演出が必要。
そのことを十分にご理解いただいていることが、余白の付け方やフォント、画像からよーく分かりますね。
Topicsの背景の水面がキラキラと動いたりするとさらにリッチにできそうです。
FVのスライドに選んだ画像や、ドロワーメニューのセンスも流石でした！
一方、啓発点として挙げたいのは「言語選択」と「予約ボタン」の設置場所。
まず、基本情報にもチラホラとヒント（っていうかほぼ答え）を散りばめましたが、このホテルはインバウンドの獲得も視野に入れているわけです。
従って、多言語サイトであることが求められており、このことに気づけたところまでは良かったのですが、肝心の言語選択がメニューの中に隠れてしまっている点は「優れたUX」とは言えない気がしてしまいました。
「ユーザーが求める情報に最短でアクセスできるようにすべき」だとすれば、FVの右端や空室・プラン検索の下など、このホームページに来てすぐに見つけられる位置に言語選択のボタンを設置してあげる方が新設なんじゃないかなと思ったのですが、いかがでしょうか？
欧米人にも気に入ってもらえそうなリッチでシンプルなデザインだからこそ、この点が余計に惜しいポイントでした。
次いで予約ボタンですが、これは単純に追従させた方がいいかもなというお話。
結局、ホテルのホームページとはそのホテルの利用予約を承る窓口ですから、ユーザーが色んなページを見て「ここいいかも」と思ったその瞬間にすぐ予約できるようにしておくことで、機会損失を防がなきゃですよね。
そういうことを考えたら、せめて客室・プラン検索のボタンは追従させるべきなんじゃないかなと思いました。
以上を踏まえて審査項目①を0.5としていますが、全体的にはメンバーからの支持が多いのも納得のできだと思うので、次回以降にも大いに期待しています。
お疲れ様でした！
②ikueさん
審査結果
◆合計得点：5.5点！
◆一般審査：1点！
◆5段階評価：4.5点！
| ① | ② | ③ | ④ | ⑤ |
|---|---|---|---|---|
| 1 | 1 | 1 | 1 | 0.5 |
◆コメント
前回チャンピオンのikueさんですが、今回も僕はそのデザインに感心すると同時に、これはメンバーからの評価が低いだろうなと思いました。
YouTubeのサムネイルなどにも同じことが言えますが、日本人のデザイン感覚と欧米のそれは間逆なことが多いですよね。
日本だと基本的に賑やかなものが好まれる傾向にありますが、欧米ではシンプルであることが是とされる傾向にあると思います。
で、amさんのところに書いたとおり、今回のテーマはインバウンドの獲得も視野に入れたホテルのホームページなので、全体のデザインをインバウンドと国内旅行客のどちらの目線に合わせるべきかというのが一番最初に悩む難題なわけですね。
ikueさんがどこまで狙っているのかは分かりませんが、結果的にこのデザインはインバウンド向けのデザインになっている印象で、色使いを最小限に抑えたその選択も各セクションの見せ方も素晴らしいと感じました。
独学応援サロンメンバーで唯一このデザインに票を入れてくれた人が、海外在住というのもそういうことだと思いますｗ
ヘッダーは控えめですが、これは固定されいるので予約・問い合わせ・言語選択がどこでもすぐにできるというのがナイスですね。
余白の持たせ方は、テーマに合っていて特に良いと思います。
個人的には下層ページも見てみたかったですが、海外向けサイトを作る制作会社や外資系の企業などに営業をしていくつもりの方がいたら、このデザインをコーディングするのもありだと思いますよ。
とにかく良いんだけど、良いからといって必ずしも人気が伴うわけじゃないという教訓を得られるデザインでした。
お疲れ様でした！
③マリアさん
審査結果
◆合計得点：4点！
◆一般審査：1点！
◆5段階評価：3点！
| ① | ② | ③ | ④ | ⑤ |
|---|---|---|---|---|
| 0.5 | 1 | 0.5 | 1 | – |
まずは学習中にもかかわらず参戦してくれたマリアさんに、みなさんから拍手を！
大きなポテンシャルを感じさせてくれるデザインですが、ひとつだけ改善点を挙げるとすれば「余白」です。
他のデザインと比較すれば一目瞭然だと思いますが、全体的に詰まっていて、そこがホテルの高級感を表現できていない要因になっているためですね。
また、旅行先のホテルでは誰もがゆっくりしたいと思うはずですから、そういう意味でも圧迫感を与えないデザインが求められます。
こうした部分は言語化が難しいので体得するのも大変だと思いますが、それこそターゲット別に様々なデザインを比較することでパターンを見つけられると思いますので、ぜひぜひ今後の学習に活かしていただけたらと思います。
お疲れ様でした！
これからもコンテストに参加してもらえたらとっても嬉しいです！
優秀作品はこちら！
ということで、第2回デザインコンテストの優秀作品は①amさんの作品に決定しました！
第2代優秀作品に選ばれたamさんの歓びの声はこちら👇
第2回コーディングコンテストの告知
このまま7月のコーディングコンテストのエントリーを開始します！
今回のデザインデータは独学応援サロンのドライブに格納されているので、そちらからダウンロードしてください。
スケジュールはこちら👇
- 7/18: エントリー開始
- 7/28: エントリー締め切り
- 7/30: 結果発表
作品の提出方法はシンプル！
作成したファイルを各々のサーバーにアップしていただき、そのURLを僕に送っていただければOKです👍
それでは、たくさんの方々の参加をお待ちしております！
◆ホテル名：ゴールデンホテル那覇
◆イメージカラー：白・ネイビー・ゴールド
◆ターゲット：訪日外国人・国内観光客
◆住所
・〒123-4567 沖縄県那覇市XXX３
・3 XXX Naha-shi Okinawa 123-4567 Japan
◆電話番号
・日本人向け：098-123-4567
・外国人向け：+81-98-123-4567
◆表記ルール
・時間はam/pm
・金額は100JPYもしくは100yen
◆ホームページ構成
・トップページ
・ご宿泊
・レストラン＆バー
・ご宴会／会議
・ウエディング
・フィットネス
・イベント
・ホテル案内
・アクセス
・FAQ
◆トップページ構成
１．FV（スライド：ホテル全景→夜景→設備→食事） ※動画／静止画の判断は任せます
２．予約（宿泊予約・航空券＋予約・レストラン予約） ※チェックイン・チェックアウト・人数・部屋数・子どもの人数で検索できるようにする ※条件無しでプラン一覧を検索できるボタンも設置
３．イベント情報／お知らせ（２カラム）
４．Story~私たちができる5つのこと
５．Cuisine~お食事 →10階オールデイダイニング →10階ロビーラウンジ →10階メインバー →12階中華料理 →12階鉄板焼 →12階日本料理
６．Special Floor~ワンランク上のご宿泊を ※コンシェルジュ付特別フロアのご紹介
７．Fitness ※18階にあるフィットネスクラブの紹介。多彩なトレーニングマシーンと広々としたプール、大浴場とサウナを完備。
８．Wedding~一生忘れられない思い出を
９．Event&Meeting ※大規模なレセプションに相応しい大宴会場と、各種イベントでご利用いただける中宴会場の紹介。
１０．フッター