まずは完成品をどうぞ
渋谷のギラギラ感を出したかったのでネオンライト風CSSを使った。
スクロールするとこんな感じ。
試しにGoogleMapAPIも使ってみた。
スマホで見るとちょっとデザインが変わります。
実際にWeb公開しているURLはここです。
ちょっと重たいかも。
作り方
まずは作った動機
vue-CLIとGitHub Pagesの組み合わせで簡単にweb公開できることを知って
試しに何か作ってみたくなったというお話。
総制作時間6時間くらいで、もちろん費用はかかっていない。
結局一通り出来上がってからレスポンシブやらなんやらの調整に一番時間かかった。
割と見た目ができていればOKくらいの気持ちで作った。
Web公開の方法
まずGitHubでリポジトリを作ってクローンして、vue-CLIを使って実装をしていく。
実装する前にまずPagesの設定をして、vueのサンプルページがうまく表示されるかを確認した。
実際にvueの生成物をPagesでの公開する方法の詳細はこちらの記事から。
XDを使ってデザインをなんとなく考える
XDはadobeのデザイン作成ソフト。
Web制作ではよく使われる上に、無料で使える模様。
adobe公式サイトのスターターキットダウンロードで入手できる。
トップのイメージを探す
素材に関してはおなじみのunsplashで見つけた。
無料とは思えないクオリティの素材を発掘できるので重宝している。
vueでトップページを作成
詳しい説明は割愛するが、HTMLとCSSに関しては、ドットインストールのはじめてのWeb制作とvue-cliの使い方をググればできるレベル。
ドットインストールは初心者におすすめ。
ネオンライト風のCSS
CSSで美しいネオンライトのエフェクトをテキストやボタン、ボーダーに実装するテクニックのまとめを参考にした。
GoogleMapAPI
ライブラリなしでGoogle MapをVue.jsで使う方法を参考にした。
レスポンシブデザイン
PCで見るのとスマホで見るのとで幅が変わるのでデザインを変更した。
これも"レスポンシブデザイン"でググったら出てくるレベルで作成。(全然解説になってない)
まとめ
以上が全貌。
結局何が難しいってフレームワークを決めることとデザイン自体の2つ。
この2点に関しては正解がないので常に最適解に近づけていく必要がある。
それ以外に関しては大体ググったら正解が手に入る。
あとは、デザインの勉強のためにWebサイト制作をしてみたが、
正直XDでお絵描きして終わりでもいいような気がする。
デザイン＋実装するなると半日はかかるので、量産ができない。
いずれにしても、今後も架空のWebサイトデザインを作っていきたい。