サイト概要
Project
制作者自身の趣味である写真撮影で今まで撮りためた写真を活用したサイトを制作。2枚目以降、下にスクロールするとその都度、新しいページが読み込まれるという「無限スクロール」機能を実装した。
この無限スクロールは画像毎にhtmlファイルを分けれるのでユニークなタイトルやh1の設定が出来る為、ページの表示速度の向上だけで無く、SEO的にも有利になると考えられる。
Goal
- 画像の構成を考え、ユーザーが飽きないように工夫する
- 適切なタイトルと見出しの設定を行う
- ajaxでのページ遷移の実装方法を理解する
- webpを使用し、高解像度画像の最適化手法を理解する
Details
- 制作時間：2週間
- 使用言語：HTML, Sass, JavaScript, jQuery
- 使用ツール：Visual Studio Code, Photoshop
制作を通して学んだこと
- ajaxを使用したページ遷移の実装方法を学ぶことができた。
- webpを使用し、高解像度画像の最適化手法を学ぶことができた。
- SEOに関して、適切なタイトルと見出しの設定の重要性を理解できた。
制作の流れ
- 1サイトのコンセプト・設計
- 2画像の選定と構成
- 3HTMLとSassで静的データの作成
- 4プラグインの設定
- 5テスト・デバッグ
撮影した写真
今回のサイトで使用した写真は、すべて制作者自身が各地に赴き撮影したものです。
愛知県西尾市の茶臼山展望台
新潟県十日町市倉下
愛知県伊良湖岬
徳島県鳴門大橋
長崎県ハウステンボス
三重県四日市コンビナート
福井県東尋坊
徳島県奥祖谷二重かずら橋
長崎県ガラスの砂浜
| プラグイン名 | 用途 | URL |
|---|---|---|
| clever-infinite-scroll | 無限スクロールの実装 | https://github.com/wataruoguchi/clever-infinite-scroll |