概要
サイト名
Aim(エイム) サイトを見る
サイト概要
芦ノ湖の元箱根町にあるコワーキング・スペース&レンタルオフィスのサイト。2025年には起業サポート事業の開始も予定している。
目的
施設の紹介。施設内外の環境の良さをアピールし、雰囲気や料金を紹介する。
最終的なアクション
利用客数、契約数の増加。
デザインイメージ
どちらかというと雰囲気を重視し、施設の印象を「落ち着いている、特別感がある」ものにする。そのうえで必要な情報を明示して利用しやすくする。
使用色
白を基調とし、自然の色である青や緑を各部に使用する。
参考サイト
H-7 HOUSE
FROM FACTORY KITAKYUSHU
PASUR
制作時間
構想1時間、情報収集3時間
デザイン20時間(PCサイト16時間、モバイルサイト4時間)
素材収集3時間、加工3時間、作成0.5時間
コーディング28時間(HTML5時間、CSS20時間、Javascript3時間)
計58.5時間
詳細
修了制作の1つ。以前、リモートによる面接を受けるためにコワーキング・スペースを利用したことがあります。好立地でそれなりに安く、快適に作業できるなんて。と大変ありがたく使わせてもらったのが印象に残っています。こういうのが都市部以外にあったら？という考えが制作のきっかけです。せっかくだからレイアウトなどを印象的にしたいとも考え、この形になりました。
頑張ったところ
やりたいことを多く盛り込んだサイトです。トップページの画像の切り替えや、priceページのカルーセルなどはCSSで実装しました(画像の拡大表示にはLightbox2を使用しています)。「Camp with My Dog」で使用したbgswitcherや、Slickなどの使用も検討しましたが、今回はCSSのanimationを活用したいと考え、CSSを使用しました。トップページの画像にはclip-pathプロパティを使用しました。このプロパティはSVGの書き方と合わせてもう少し勉強していく必要があると感じています。
デザイン面は、特にトップページは印象的にしようとしてみました。画面いっぱいにコンテンツを配置するサイトに憧れがあったのかもしれません。割と気に入っていますが、結果としては程々に無難な形になったようにも思います。
また、トップページの一部の画像にパララックスを実装しました。悪戦苦闘の末、現状ではかなりシンプルな方法で実装できたのではないかと思います。いつかはやってみたかったことなので、こうして形にすることができて嬉しいです。
「文字のジャンプ率」もキーワードの一つです。今までにないくらい大きな文字を取り入れてみました。やり過ぎ感もなくはないですが、やらないよりも断然に、やって良かったと思います。
制作を終えて
修了制作として、これまでに学んだことを活かすことができた作品だと思います。「Camp with My Dog」もそうですが、ところどころが参考にしたサイトそのままにもかかわらず、全体のクオリティは当然にまだまだ…と改めて感じます。「作ること」は好きなので、これからも楽しみつつ、勉強も頑張りつつ作っていきます。