HARBOR COFFEE / 01
一杯を淹れる、その時間から。
香りがほどける手元を、ゆっくり眺める。
WEB INTERACTION / SLIDER STUDY
3枚を、ひとつの体験に。
画像・文字・操作の重なりを整え、パソコンでもスマートフォンでも読みやすく。写真3枚の切り替えを実際にお試しいただける、自主制作の見本です。
左右ボタン・下のインジケーター・キーボードの←→で操作できます。自動再生は4秒間隔。操作時・マウスを重ねた時・フォーカスがある間は停止します。
01 / READABLE
画面に合わせ、文字を守る。
画面幅に合わせた比率と文字サイズ、背景の明暗を調整。小さな画面でも案内が写真に埋もれないよう設計しています。
02 / CONTROLLABLE
見たい人のペースで。
前後移動・直接選択・停止を用意。動きを減らす設定を尊重し、操作状態を支援技術にも伝えます。
03 / MAINTAINABLE
変える場所を、小さくする。
写真3点・代替テキスト・コピーを分離。既存ページへの組み込みは、環境と編集可能な範囲を確かめてから進めます。
写真3点PC / スマートフォンキーボード操作自動再生 / 停止外部通信・計測なし
制作・表示について
架空ブランド「HARBOR COFFEE」を題材にした自主制作です。担当：画面設計、HTML・CSS・JavaScript実装、表示と操作の確認。写真は本ポートフォリオ用に制作した架空素材を使用しています。Jimdo管理画面での受託・修正実績ではありません。実サイトでは使用中のプラン、既存コードと管理権限の確認が必要です。