広島市中心部にあるRestaurant＆bar ROOSTERは、世界第三位のフレアバーテンダーがオーナーを務め、料理とお酒がどちらも楽しめるお店です。
バーほど静かすぎず居酒屋よりにぎやかすぎないちょうどよい雰囲気と、個室完備で宴会や二次会での利用も可能という点が強みですが、現在情報を発信している媒体がInstagramしかないため、お店の雰囲気や魅力を伝えることを目的にサイトの制作に取り組まれました。
近辺で競合となるバーのサイトは黒を基調とした少し暗めの落ち着いたデザインだったので、幅広いシーンで利用できることをアピールするため、リッチ感がありつつも明るい雰囲気のデザインを目指ました。写真を多用したため、使用する色を減らすなどの工夫でリッチ感と明るさのバランスを取っています。
全体的なあしらいには主に「線」を使っています。色があまり使用できない中、注目して欲しい箇所にはその線につけたアニメーションで目につきやすくしました。線の動きには特にこだわり、閲覧の邪魔にならないように、タイミングもスピードも丁寧に調整され、説明にも熱がこもりました。
アクセスの項目ではマップを埋め込むだけではなく、ランドマークからお店への道のりを実際に歩いた動画も載せています。建物に到着して終わりではなく、エレベータに乗って何階で降りるのか、降りたら左右どちらに歩くのか、どの扉がお店の入り口なのかまでしっかり説明があり、非常にユーザビリティが高いものとなっています。立地自体は良いが少し入り組んだところにあってわかりにくいという弱みも見事に解消しました。

トレーナーからは「店の雰囲気・世界観が良く伝わる」「ロゴの星・あしらいの線が出てくる時の動きや、道順を紹介する動画で扉まで映すなど、細部にまで気が利いたサイトとなっている」「ヒアリングで得られた情報から課題を見つけ、それを解決するための方法をしっかり考えている。ディレクションの能力も高い」と評価されました。

Oさんが制作されたのは、ご自身の緑色への愛をいっぱいに詰め込んだ「緑色推しサイト」です。コンセプトはとにかく緑。たくさんの緑を見て緑に癒され、「緑っていいな」と感じて欲しいという思いが込められています。ワードプレス化した上で公開されることが決まっており、公開後1年で301いいねをもらうという具体的な目標に向かって制作を進めました。

全体的なデザインは緑色が映えるようにあえてモノクロに。多種多様な緑色以外には色彩を使わないようにしています。

特に力を入れていたのはアニメーションで、サイトを訪れると回転する丸い絵具パレットが現れ、ページ上部から緑色の絵の具が一雫落ちてきてパレットを彩ります。このアニメーションはアフターエフェクトで１から自作されており、回転の速度、絵具の落ちる速度、パレットに落ちて色が広がる動きなどを0.01秒の単位で調整された力作です。さらにページの閲覧を進めるとそれぞれ違う緑の絵の具が落ちてくる仕様で、全部埋めたくなってしまうこと間違いなしです。

「公開後1年間で301いいねをもらう」ために、いいねボタンの位置や形状にもこだわりました。緑色の絵の具チューブの上に真っ白なハートが配置してあり、押すと絵具が充填されるアニメーションでハートに色が付きます。こちらもついつい押したくなる出来栄えでした。

トレーナーからは「緑愛のこもったサイト。完成度が高く、言うことがない。制作中に一度アドバイスしただけでワードプレス化を見越したコードが書けてけていたので、公開がとても楽しみ」

「ぱっと見たときの余白感が絶妙。ゆったり、癒しといったコンセプトが上手く表現できている」「古代ローマの石碑から作られたフォント『トレイジャン』を使うことで歴史の重みをも感じるサイトになった。このフォントを選べるセンスが素晴らしい」と評価されました。

穂は広島市内で女性整体師さんが一人できりもりされている整体院。産前産後の体のケアや、美容メニューもあり、完全個室での女性限定の営業が特徴です。来院数を増やしていくための施策としてホームページを制作することになりました。公開前提の実案件です。

現在の流入元のはインスタ・対面営業・既存顧客からの紹介がメインです。店舗が通路に面していないため、飛び込み客は見込めない。そして、インスタグラムを利用していない方に院を紹介するためのツールがないという点を一挙に解消するため、40代-50代のSNSをあまり使用していない世代をターゲットとして制作に取り組みました。

サイトのコンセプトは和風で、親しみやすさ・安心感を感じさせるもの。

先方の要望からベージュをメインカラーとし、コントラストチェッカーを使用してベースカラーとアクセントカラーを決めました。ツールを使用した根拠を伴うデザイン・カラーにはトレーナーからもターゲットの年代をよく考えて作られていると好評でした。

コンセプトの「親しみやすさ・安心感」を表現するために写真は縁を丸くし、モーフィングで揺らめく動きを付けています。この他、ボタンの一部は枠がゆっくり回り続け、ホバーすると回転速度が上がって定位置で止まるという遊べる動きになっていたり、文字がふわりと浮かびあがったり、下線はただ引かれるだけではなく、行き過ぎたた分が戻ってくる動きを付けるなど、それぞれの動きが持つ効果やイメージを計算したこだわりのアニメーションが随所に仕掛けられていました。

6か月の受講期間中に独学でワードプレス化もほぼ完了しており、いつでも運用可能という完成度の高さには誰もが驚かされました。

トレーナーからは「元々デザイン力が高かったので、依頼やテーマに上手く合わせていけるかという点だけが気がかりだったが杞憂だった。背景の柔らかい色合いやモーフィングのゆったりした動きなどの細やかなあしらいでコンセプトを表現できている」「自分がやってみたいと思った動きを再現するのが上手い」「6か月目とは思えない完成度。十分公開できる水準に達している。データを読み取ることができる人なので次はGoogleアナリティクスを活用したサイトの運用・改善に挑戦してほしい」と評価されました。

ネット専門のレコード・CDの中古販売店「あづまや」。

ロック・ビジュアル系の商品にちょっとマイナーな商品をメインに取り扱っているお店で、1か月あたりの購入率が0.57%となっています。Yさんはこの数値を一般的なECサイトでの平均値1～2％に引き上げていくため、サイトの信頼性を高めるブランディングサイトを制作しました。

元々DTPのお仕事をされていたためデザインには何の心配もないと思っていたのですが、オーナーの奥様が描かれたゆるキャラ風の「うさぎ」のマスコットキャラをメインに使用して欲しいとの要望がありました。主に取り扱っている商品がハードロック・ビジュアル系の音楽であるため、アンニュイな表情をしたうさぎとのバランスが取れる背景が見つからず、ミュージックビデオから着想を得てグリッチエフェクトを使用するなど、工夫を凝らしました。うさぎに負けないようにデザインは全体的にうるさめに仕上げています。

「信頼性を高める」という目的のために、お店の来歴を説明するコンテンツを用意して、お店についてより深く知ってもらうほか、オススメ商品の紹介にも力を入れました。商品画像にはカード型のスライダーを使用し、カードをめくるような動きをつけています。商品にマッチしていて面白みもあると好評でした。

オンラインショップのリンクバナーはホバー時のみポインターがマスコットのうさぎのイラストに変わるなど、ユーザーの目を引く作りになっています。

トレーナーからは「メイン商材とマスコットキャラの方向性が大きく異なるため、デザインとしてまとまるか心配していたが、グリッチやローディングのアニメーションで調和させた。コンテンツ全体を右に寄せて、その隙間から常にグリッチをかけた背景をチラ見せしているのが良い」「プラグインが自分の作りたいものに合っているかどうかを見極めるのが非常に上手い。グリッチエフェクトの処理など、サイトが重くなりすぎるとユーザーの離脱につながるので注意が必要」「ビジュアル系やハードロックが好きな人は違和感を感じるであろう『ピンクとうさぎ』という、ずらしが印象に残る。公開後の反響が楽しみ」と評価されました。

地元の親子連れに親しまれる広島にある某テーマパークは、遊園地の跡地に開園し様々なイベントに利用できる施設を擁しています。

Iさんは、来場者が増え、活気がもっと出るように。という気持ちから、webサイトの非公式リニューアルに取り組みました。

調査したところ、広島県の出生率は全国平均より高く子供も多い。競合となる県内の都市公園も増えています。他の公園に来園者が流れていると考え、このテーマパークならではの魅力を伝えることを目的として制作を進めていきました。

強みでもある建物の外観の良さを生かせるようにファーストビューの写真にこだわりました。子どもの遊び場として、にぎやかな雰囲気を出すため、手書き風の不規則なパスで切り抜くなどの工夫もあります。

各コンテンツのタイトルはポップなフォントに跳ねるようなアニメーションを付随させ存在感を出しつつも楽しい雰囲気に仕上げました。

また、イベントの紹介は、普段から遊びに利用している人以外の新規の方の来園のきっかけにとなるようにと考え、特に力を入れた部分です。何となく閲覧している人にも最新の情報が届くように画像は大きく、記事は自動でスライドします。

全体的に、ユーザビリティーを意識した作りになっており、特にフッターには閲覧者がどのページからでも知りたい情報に、すぐにたどりつけるよう、全ページへのリンクを表示しました。

トレーナーからは「このテーマパークのロゴは色数が多く、アットホームな地方感があるため、かっこよくまとめるのは難しかったと思うが、親しみやすい中に今風のポップさでうまくまとめることができている」「全体的にユーザビリティが高く、利用者の視点に立つことができている。コーダーにも絶対に必要な視点なので大切にしてほしい」「テーマパークの中に何の施設があるか気になっていた。このサイトは自分のような潜在的な顧客にもニーズがある。完成度も高いので実際に公開してほしい」と評価されました。

古典をおもしろい視点で描かれている「日本の古典」という本に出会い、古典の魅力を再発見したTさん。その語の一つの平家物語にインスピレーションを受けて、名文をモチーフにしたイメージサイトを制作しました。

物語の中に出てくる言葉をイメージを写真やイラストで表現しています。

なかなか作業が思うように進まなかったのですが、好きなことを題材に作品を作ろうと決めて、言葉にあった写真を探していくうちに作業が楽しくなっていったというTさん。

文字の色や写真の明るさを調整するなど細かい点まで工夫を凝らしています。また文字を読んでもらうために動きもつけました。

平家物語の魅力を多くの人に伝えて古典の素晴らしさに気づいてほしいと、今後もこのサイトを充実させていきたいと意気込みを語っていました。

トレーナーからは「古典をモチーフにサイトを作るという発想が面白い」「古典の面白さや魅力を伝えることができれば、趣味サイトを超えて世の中に役立つサイトになると思う」「好きなことから学習を深めていって最後まで諦めずにやり遂げたことは本当に素晴らしい」と評価されました。