アグラオネマ写真ギャラリーサイトを作ろう ＤＩＹ予算０円
アグラオネマの写真が貯まって来たので写真のギャラリーサイトをひとつ作ってみたいと思います。
イメージとしては、写真の説明は一切なしに、写真だけで見せるようなサイトです。インスタグラムが近い感じですがインスタグラムだと高解像度の画像をアップできない（勝手に小さくなる）制約があるので、大きな画像をアップできるサイトを自分で用意してみたいと思います。
完成イメージはこんな感じ。写真だけペタペタと貼ってある感じのサイトです。
【完成イメージ】
Aglaonema Gallery よかったら見てください。
写真のリンクの先はこんな感じのイメージ。
では作っていきましょう！
目次
wordpressインストール
CMSは何でも良いのですが、この手のサイトテンプレートは圧倒的にwordpressが充実していると思いますので、wordpressをサーバにインストールして使います。
wordpressテーマの選定
いくつか候補がありました。
Gridster-Lite
すごく良くできたテーマですが、若干重いのとアイキャッチ画像を登録しないと記事一覧に画像が表示されなかったので導入を見送りました。記事に写真だけ貼ればＴＯＰに画像が出てくるのが理想です。
あと若干スマホで見た時のデザインが良くなかったです。
Sketch、Portfolio Press
二つともに良くできたテーマなのですが、高解像度の画像を記事の中にアップすると、トップページの記事一覧のサムネイルがでかい画像になってしまいます。そのためアイキャッチ画像に小さい画像をはめる等の配慮が必要で、そのまますぐに利用するには少し難易度が高かったです。
課題・要望
- とにかくトップページの見え方が重要。写真がたくさん並んで表示されて欲しい。
- アイキャッチ画像を設定しなくてもトップページに画像が出てほしい
- レスポンシブ
- 解像度が大きい画像を投稿しても、トップページには小さいサムネイルで出てほしい。
- 動作が軽い（ただし、そこまで速度は求めない）
- カスタマイズはできるだけしたくない
とわがまま三昧ですが、良いのを見つけました。
Portfolio Gallery
名前がまさにポートフォリオギャラリーというまんまの名前ですが、このテーマはすごく良いです。ＷＥＢでもあまり導入実績や紹介記事を見ませんでしたがこれはかなり良いです。
まず良い点としては、レイアウトが画像に特化していという点が挙げられます。上記サンプル画像ですがＴＯＰに画像が並んで表示されます。実施に文章がない画像だけが貼ってある記事をたくさん書いてみました。
すると・・・・
おおおお。完成イメージとまんま同じやん！！
（・・・最初から記事を書く前に完成しておりました。。。すみません。）
全て写真だけの記事を書いてます。たくさん書くときれいな一覧になります。
解像度ごとに写真の数を調整してくるれのも素敵です。ワイドモニターだとこれぐらい数が出ます。
これは良いですね。レスポンシブのデザインも素敵です。
スマホとタブレットでの見え方はこんな感じです。左がスマホ、右がタブレット。これは良い。
画像をマウススクロールした時のイメージ。記事へのリンクとスライドショーのボタンが出ます。
リンク先の記事の見え方はこんな感じ。画像は１０２４×７６８で載せてますが。でかい画像でも違和感がなく見えます。このデザインとアグラオネマが良く合います。
スライドショーはこんな感じ。トップの画像をスライドショーで見ることもできます。標準でこんな機能がついているのは嬉しいですね。
完成度が高く、すぐ使えるので迷わずこのテンプレートに決めました。あとはサイト素材を用意すればすぐに運用を開始できそうです。
サイト素材の用意
サイトのモチベーションを保つには何と言ってもロゴなどの素材が重要です。上質なものを使っていると気のせいかモチベーションが上がる気がします。。
という事で、ロゴとメニューの背景画像を家族に用意してもらいました。（自分は画像加工は苦手なので・・・）
ロゴ
「aglaonema」のカッコイイロゴを６つ作ってもらいました。
どれもカッコイイのですが、一番下の鉢植えがあるロゴがカワイイので、今回はこれを採用しました。他のも良いので気分転換にたまに変えてみたいと思います。うーん。一番目と四番目のもかっこいいんだよな。。。
メニュー背景画像
デフォルトの画像もカッコイイのですが、アグラオネマとは無関係なので今回は変更します。
縦長のアグラオネマ画像の探しましたが、なかなか良いのが見つからない。
下の画像は良いのですが、葉っぱが日焼けを起こしていたり途中でやぶけています。。。そこでphotoshopの登場です。
さくっと作業をしていただくとこんな感じ。
あれ！？穴が消えた！さっきまでなかった葉っぱが復活してる！！！！これはすごい！（若干反則ですが・・・）
この画像の下に黒のグラデーションを付けて背景になじませます。
これで素材もそろったので、テーマのカスタマイズ「Gneral」「Gneral-Main」からメニューの背景画像と、ロゴ画像を作った素材に変更します。
これで完成！！！！ロゴと背景画像が良く合いますね。
良かったら是非見てみてください！！完成サイトはこちらです。
この後インスタグラムとの自動連携もやってみましたが、どうもインスタグラム側の画像が一度荒くなってしまうので記事を投稿した時に画像が荒くなり、満足な結果は得られませんでした。
次回また試してみたいです。
