デザイン事務所で働かれているSさん。Web関連の仕事を増やしていきたい、Webサイトから仕事の受注ができるようにしたい思いで、自社デザイン事務所のホームページ制作を行いました。

現状は知り合いからの紹介、営業による受注がメインですが、今後はWebからの受注を全体の10％にすることが目的。短時間で理解できる「わかりやすさ」、ここだったら大丈夫だと思ってもらえる「信頼感」、多くの人に見てもらうための「閲覧数」をポイントとしたサイト制作です。

TopページはSさんが制作されたパンフレットや本の表紙などの実績作品がずらり。興味を持たれた作品をクリックすると、作品がポップアップされ、Sさんが作品にどのような役割で関わったかを記載しています。サービスページはアイコンで分かりやすく仕事紹介。このページからも実績作品ページに遷移できます。Sさんの受賞歴も記載し、サイトを訪れた方が、信頼感を持ち、仕事をお願いしたくなるサイト構成です

トレーナーからは、「ユーザーが信頼に値するくらいの情報が詰まった大変素晴らしいサイト」と講評しました。

多くの保護者にPTAのことを知ってもらいたい、役員同士の情報・連絡ツールを兼ね備えたホームページがあれば便利、そんな思いでTさんは、小学校PTAの仮想サイト制作に取り組まれました。

小学校という明るさ、フレッシュさを表現するため、メインカラーを明るい緑色に。全てのページを通して共通性を持たせるため、メインカラーの緑から連想させた葉っぱの形で写真の枠取りのデザインをしています。メインビジュアルは明るく調整することで、堅苦しいイメージを緩和。メニュー、新着記事などをホバーすると、アクセントカラーの黄色が出て、ユーザーが何を選択しているか分かるよう工夫しています。紙で発行していたPTA通信をブログで発信、また活動報告も月別・委員会別で個別記事を投稿、検索できるようWordPressで実装しています。パスワード機能や、各申請書、PTA規約などもダウンロードできるなど、機能満載のホームページです。

トレーナーからは、「情報設計が非常に上手にできている。ローディングアニメーションが素晴らしい、リッチな仕上がり」と講評しました。

Nさんの祖父がイチジク農家をやられていることもあり、イチジクを直売する方法を獲得すること、イチジク狩りという形で新鮮なイチジクを楽しんでもらうこと、そして、イチジクの評価、認知度を上げ、需要を高める目的でサイト制作に取り組まれました。

Topページのメインビジュアルは、イチジク狩りに出かける親子の写真を大きく掲載、イチジクの色をメインカラーで表現しています。スクロールするとイチジクの写真がスライドで登場。イチジク収穫時期のコンテンツはグラフ、画像を用いて、読みやすく仕上げています。スクロールするとロゴが回るアニメーションがお気に入りポイント。背景のイチジク画像もスクロールで動くように表現し、ページに立体感が出ています。農園の新着情報も投稿できるようWordPressを実装し、コンテンツの充実が図られているサイトです。

トレーナーからは、「イチジクの市場環境をしっかり調べ、サイトに落とし込みがしっかりできている。講評会からブラッシュアップされ、努力が感じられるサイト」と講評しました。

Kさんが飼っている犬のべべちゃん。ペット情報が欲しい、癒しが欲しい人に向けて有益な情報や、ユーモアある内容を伝える。そして、そこからInstagramのフォロワー獲得の後押しとなるよう、ホームページ制作に取り組みました。

トKさんが描かれたイラストとミスマッチしないよう、落ち着いた色、フレンドリー、シュナウザーっぽい配色。キービジュアルの「べべちゃん」と、犬のモフモフ感が伝わるフォントのキャッチコピーに、Kさんが描かれた柄が背景にあり、可愛らしさが伝わります。動きをつけた犬の足跡を下に向けることで目線も誘導。一番のポイントは、フォロワーを獲得するため、Instagramと連携し、Instagramを更新すると制作したサイトの写真も更新される仕組みを実装しました。家族のイラストアイコンをクリックすると「よく噛まれる」といった情報がポップアップ。べべちゃんとの戦い、家族との相関図のコンテンツもユーモアが溢れています。

トレーナーからは、「デザインの変更が多かった中、コーディングの試行錯誤は宝になる。楽しい雰囲気を作れたサイトは自身の強みなる。」と講評しました。

紅茶が好きなHさん。より多くの人に紅茶の魅力を知ってもらいたい、また紅茶をたくさんの人に購入してもらいたい思いで、紅茶専門店「Calment」のホームページ制作に取り組みました。

忙しい中でも香りと味を楽しみながらほっと落ち着ける空間、顧客が必要としている紅茶を提供することがコンセプト。ファーストビューで、ローディングすると「Let us have a break」と左から文字が出現、Hさんお気に入りのポイントで、メインビジュアルのイメージにもマッチしています。スクロールするとテキストがふわっと出現したり、ホバーすると画像が動くアニメーションも実装。メニューの画像クリックすると、ポップアップで詳細も出てきます。「Item」コンテンツのサムネイル画像と、メインスライダーの画像とテキストを連動させることが難しかったとHさん、サイトではしっかりと実装をされています。

トレーナーからは、「紅茶の素晴らしさ、世界観が伝わるサイト、自身の好きをしっかり表現し、企画趣旨も伝わりやすい」と講評しました。

今回のテーマとなるバンコクのゲストハウスへ実際に行ったことがあるFさん。利用者同士で「もっとPRした方がいい」という話となり、魅力や雰囲気を伝えたい思いで、ゲストハウスのホームページ制作に取り組みました。

にぎやかでアットホームな雰囲気、バンコクの暖かい気候をイメージし、暖色系でデザインしました。キービジュアルにはたくさんの写真を入れ、にぎやかな様子を表現。下層ページの紹介は背景色を変えて分かりやすく、そして写真とテキストが両サイドから出現する工夫で目を引きます。ABOUTページでは、ゲストハウスの魅力が満載。スクロールしていくと、アットホーム、アクセスが良い、日本人宿で安心、とコンテンツの表示と、線のアニメーションで目線を誘導。Fさんお気に入りポイントです。オーナー紹介ページや、アクセスページにもアニメーションをたくさん取り入れたところにもこだわりが感じられます。

トレーナーからは、「ファーストビューに説得力があり良い表現。伝えたいことがまとめらており、情報設計、コンテンツがしっかり作れている」と講評しました。

カフェ巡りをしていたところ、SNSの情報発信がメインで、Webサイトがあるカフェがあまりないことに気づいたUさん。シンプルな雰囲気・色で統一、クオリティーの高いグッズ販売や、店内の雰囲気がわかる写真を載せ、来店できない人のためのオンラインショップを兼ね備えたホームページ制作に取り組まれました。

デザインカラーは白と黒、グレーでシンプルに。Topページのカフェ紹介では「NO.DESIGN COFFEE」を3行で大きく配置し、クオリティーの高さを表現。Uさんお気に入りポイントです。メニューやショップ、店内外の写真をスライダーで流し、色々なコンテンツを見てもらう工夫も。ホバーするとボタンがぐるぐる回る動き、ハンバーガーメニューの開く、閉じるの動きを入れたところもUさんのこだわりが感じられます。

トレーナーからは、「文字の大きさ、余白感でうまく見せられているサイト、アニメーションも良い雰囲気で実装されている。タイポ的なデザインも素晴らしい」と講評しました。