【自主制作】架空シェアオフィスのLP
概要
2022.12 自主制作として架空のシェアオフィスのサイトを制作しました。
制作期間
2022年12月上旬から下旬まで、実工数としては0.5ヶ月 ※架空サービス案の検討時間含む
サイト概要（制作テーマ）
シェアオフィス（loocon）のLP ※架空案件
このテーマを選んだ理由
現在シェアオフィスで週1回仕事をしており、サービス内容が身近で考えやすかったこと。
自主制作としても写真素材が集めやすかったことなどがあります。
架空のシェアオフィスの概要
・1名個室のみのシェアオフィス
・ラウンジ利用が可能で、入居者同士の交流もある
・備品なども月額利用に含まれるので自由に利用可能
サイト制作の目的
シェアオフィスについて知ってもらい、内覧に来てもらう
（最終目標は入居者を増やす）
ターゲット
・個人事業主（1名）で仕事をしている人
・近隣に住んでいて、シェアオフィスを探している人
デザインイメージ
・オフィスの雰囲気が伝わる写真等をメインにする
・きちんとしたビジネス感も出しつつ、地元のオフィスという身近さも残すデザイン
工夫した点
・シェアオフィスのLPなので、実際に利用してもらうオフィスの様子が伝わることを意識しました。
・動きの部分については他の制作物では使っていない動きを導入しました。
例えば、特徴では写真の位置に合わせて横からの動きを入れました（代わりにくどくならないように他は共通）
他にも、メインビジュアル上のヘッダー部分は下段に配置し、スクロールで上部に残るようにしました。
その際に自然に固定されるように考慮しました。
・静的な部分では、料金の吹き出しやFlowの数字も、画像ではなくCSSで表現しました。
・ビジネス利用のサービスなので、本サイトも情報の見やすさ・伝わりやすさも意識しましたが、
高級オフィスではなく、地元の身近な雰囲気も残るようゴシック体にしました。
・英字フォント（ロゴとセクションタイトル）はletter-spacingを活用し見やすさも考慮しています。
・ロゴは「Pacifico」を利用していますが、交流会もあるというオフィスの特徴から
繋がりを表す筆記体を選んでいます。
・レスポンシブについては本サイトについてもどの画面幅でも崩れないようコーディングの記述を工夫しました。
使用ツール・スキル
・コーディングについてはHTML・CSS・jQueryを使っています。
jQueryは、アコーディオン・ハンバーガーメニュー・PageTop・ヘッダー固定・ふわっと表示で利用しています。
スクロール位置に合わせて動きを変えるなどをしています。
また、CSSでもメインビジュアルのアニメーションなどを記述しています。
・デザインカンプはでXDで作成しています。
・ロゴ・数字の飾りについてはIllustoratorで作成しています。
使用素材
・写真素材はAdobe Stock・Photo ACの無料素材を利用しています。
・ロゴのフォントはAdobefontから、残りはGoogleフォントを利用しています。