デモ制作について
Webcolorが構成、デザイン、フロントエンド実装まで行った4つの自主制作デモを掲載しています。
題材は、ミニゲームを含むキャンペーンサイト、複数ページのゲーム公式サイト、写真を主体としたブランドサイト、事業や品質情報を整理したBtoBコーポレートサイトです。各事例で、制作範囲と実装した機能をご紹介します。
デモサイトで使用している画像素材は、制作検証用に生成したものです。サイト構成、デザイン、実装はWebcolorで行っています。
Nyapolis
キャラクターや街の紹介、遊び方、施設案内、キャラクターコレクションを、スクロールの流れに沿って構成しました。
30秒のミニゲームはJavaScriptで実装し、制限時間、スコア、アイテムの移動と再配置、BGM・効果音を制御しています。別のタブへ移動した際には進行を止め、画面へ戻った後も残り時間がずれないようにしています。
ゲーム画面は表示領域に合わせてサイズを調整しています。モーダル表示中の背景操作抑止、Escapeキー、キーボードフォーカスにも対応しました。
主な実装
- 30秒ミニゲーム
- キャラクター一覧と詳細表示の連動
- BGM・効果音
- Canvasパーティクル
- モーダルとキーボード操作
- レスポンシブ対応
制作範囲
- 構成整理
- デザイン
- HTML・CSS
- JavaScript
- レスポンシブ対応
- アニメーション実装
- ミニゲーム実装
ASTEL
トップページに世界設定、システム、街、探索地、図鑑、キャラクター、ギャラリーをまとめました。読み物コンテンツは一覧ページと全10話の個別ページで構成しています。
ヒーローのスクロール連動、キャラクターとギャラリーのカルーセル、タイピング、パララックス、サウンド、下層ページへの遷移演出を実装しました。カルーセルの表示方法は画面幅に応じて切り替えています。
ブラウザの戻る操作を行った場合も、遷移用の画面が残らないよう表示状態を戻す処理を入れています。
主な実装
- トップ・一覧・全10話の複数ページ構成
- スクロール連動ヒーロー
- キャラクター・ギャラリーのカルーセル
- ページ遷移演出
- タイピング、パララックス
- BGMの任意再生
制作範囲
- 構成整理
- デザイン
- HTML・CSS
- JavaScript
- レスポンシブ対応
- アニメーション実装
- 複数ページ構成の実装
Umire
写真と余白を中心に、コンセプト、商品、ワークスペース、ルックブック、素材紹介、Journal、問い合わせまでを一つのページに構成しました。
Journalは、PCでは記事にポインターを合わせると写真が切り替わり、タブレット・スマートフォンでは自動で切り替わる仕様です。記事本文はページを移動せず、ダイアログ内で閲覧できます。
問い合わせエリアにはWebGLを利用した波紋演出を組み込みました。WebGLが利用できない環境では演出を実行せず、静止した背景を表示します。
主な実装
- 4枚の画像を使ったヒーロー
- 商品・ルックブックのカルーセル
- 端末別に挙動を切り替えるJournal
- 記事ダイアログとフォーカス制御
- パララックス、スクロール演出
- WebGLによる波紋演出
制作範囲
- 構成整理
- デザイン
- HTML・CSS
- JavaScript
- レスポンシブ対応
- アニメーション実装
- ダイアログ実装
KUROMORI STEEL
鋼材の調達から切断・二次加工、品質確認、納入までを担う企業を題材に、事業内容や対応範囲をトップページで把握できるよう構成しました。問い合わせは相談内容ごとに分け、材料や加工方法が決まっていない段階でも連絡先を選びやすくしています。
ビジュアルは、鋼材の重量感と製造現場のスケールが伝わる写真を軸に、濃色の画面と大きな文字で業種らしい力強さを組み立てました。ファーストビュー画像の読み込み進捗を表示し、完了後に見出しを文字単位で展開します。スクロールに合わせたヒーロー画像の移動やパララックスも、情報の切り替わりにリズムと奥行きを加える演出として実装しています。
お知らせカルーセルは、再生・停止、表示項目の選択、キーボードフォーカス時の自動停止に対応しています。非表示の項目へフォーカスが移らないようにし、利用者が項目を選択した際は、切り替え後の内容を読み上げ環境へ通知します。動きを減らす設定では自動再生や演出を停止します。
主な実装
- ファーストビュー画像の読み込み進捗表示
- 文字単位で展開するヒーロー演出
- スクロール連動ヒーローとパララックス
- 再生・停止と状態通知に対応したお知らせカルーセル
- ナビゲーションの開閉状態通知とEscapeキー操作
- 画面幅に応じた画像の切り替え
- 動きの軽減設定への対応
- OGP・構造化データの設定
制作範囲
- 構成整理
- デザイン
- HTML・CSS
- JavaScript
- レスポンシブ対応
- アニメーション実装
- キーボード操作・読み上げ・動きの軽減設定への配慮
- メタ情報・構造化データ設定
対応できること
デザインデータからのHTML・CSS・JavaScript実装、アニメーションやインタラクションの追加、レスポンシブ対応、CMS組み込みを見据えたテンプレート設計、既存サイトの改修に対応しています。
動きの仕様が固まっていない場合は、デザインの意図や参考イメージを確認しながら実装方法を整理します。既存の開発環境や命名規則、納品形式に合わせ、ページ単位・機能単位で担当範囲を調整することも可能です。
実装のご相談、
お気軽に
お寄せください
コーディングのみ、
既存サイトの改修、
CMS導入など、
小さなご相談から承ります