地域ポータルサイトを作ろう 第2回

Tweet

Pocket

前回地域ポータルサイトを作ろう 第1回から約1ヶ月経ちました。

あれから進んだ事は、トップページのデザインが概ね出来た事。下層ページのスマホデザインがなんとなく出来た事くらいです。

その他、サイトの構成について考える時間がほとんどでした。

地域ポータルサイトを作る上でのおさらい

wordpressで作成

デザインはテーマを自作作成

html5とCSS3によるレスポンシブデザイン

wordpressをマルチサイト化し、店舗ごとにユーザーログイン&ブログ投稿を可能にする

wordpressプラグインbudypressによって、SNS化←これを導入すべきか検討中

地域ポータルサイトを作成し直すにあたり、ほかの地域ポータルサイトをいくつも拝見しました。ここから見えてくる事が2つあります。

サイト自体をSNS的な位置づけにし、一般ユーザーを無料会員制にして、サイトリピートを促すか、またはそうではないクローズ型にするかという事です。

地域密着型のSNS型はかなり魅力的ですが、かなりハードルが上がります。管理が大変な上にデータベースの量が膨大になる事必至です。さらに、制作にかなりの時間を要するでしょう。

しかし、クローズ型にしてしまえば、そもそもマルチサイトにしなくても店舗ごとにログインや、カスタム投稿を用いてブログ投稿も可能になります。しかし、この場合問題なのは、それぞれのユーザー同士の投稿内容が見えてしまう事です。この点は、プラグインやPHPをカスタマイズする事で回避出来る事が分かってきましたが、逆に言えばマルチサイト化してしまった方が色々と楽かもしれないという事でもあります。さらにマルチサイト化するなら、いっそのことSNS化してしまおうか。。といった具合に、思考が堂々巡りしている状態です。

現状のデザイン

現状Illustratorにてスマホデザインを作成→HTMLとCSSをガリガリ書いてレスポンシブの表示をスクラッチにて調整中です。

wordpressのテーマ化を意識してデザインを組むのにもかなり慣れました。

今回はモバイルファースト設計で作成している為に、正直かなりラクです。普段はPCサイトをデザインしてから、それのモバイルデザインを起こし直すのですが、いちばん大変なのは、間のデザイン。そう、タブレットをどうするかってことで毎回悩みます。

今回の様に、1から10まで自分でやる場合は曖昧なまま進めてCSSで調整すればいいやってできますが、フロントデザインだけやる場合はそうも行きません。コーダーからちょくちょく連絡が来てしまいます。

まあ、こちらからしたら、適当にいい感じにしちゃってよ。って話なんですが、どうも理系の人たちにはこれが通用しないようで、こちらが誤って1pxズレていた場合も、

「これが仕様でしょうか？」

んなわけあるかいって心で叫びます。そうです、ズレてた私が悪いので。

そんなこぼれ話はさておき。

自らコーディングしていく作業は、実に楽しいですね。色々勉強になるし、前回の反省を活かせるので、更なるスキルアップにもなります。最近は、CSSのnth-chaildの使い方をマスターしたので、ループ処理のコーディングがラクになりました。

便利な擬似要素nth-chaild( )

nth-chaild( )は、指定した何番目の要素に適用とか、first-chaildやlast-chaildを使えば、最初だけにCSSを適用や最後だけにCSSを適用する事が出来ます。nth-chaild( )に関しては、( )内に変数を入れることで、2番目だけとか、列の2番目と3番目だけとかも指定する事も出来ます。

ナビゲーションの要素同士の区切り（|←こんなやつ）とか入れる場合や、横並びにした時のマージンを指定する際等にもとても重宝しています。

今回のポータルサイトのトップページには、画像スライダーを実装する事にしました。やはり、写真による訴求効果は大きいのですが、店舗情報を記載したいので、店名やキャッチコピーも同時に流したいと思って探していたら、Slickというライブラリを発見しました。下記リンクが配布先になります。

便利なカルーセルスライダー Slick

http://kenwheeler.github.io/slick/

このSlickの良い点は、レスポンシブに対応していることと、動作が非常に軽いことです。カスタマイズもかなり簡単な為、実装するのがかなり簡単でした。公式サイトを見れば分かるのですが、かなりの多機能で、色々なタイプのスライダーパターンが最初から存在しているため、少しのカスタマイズで手軽にサイトに合わせたデザインにも変更が可能です。

SNSシェアボタンはfontawesomeで

ポータルサイトには欠かせないSNSのシェアボタンも今回も導入しています。TwitterやFacebookのロゴのボタンをフッター部分に配置しました。これはもう、画像を貼るなんてナンセンスな事はありえないですね。Twitterが配布しているfontawesomeを導入しています。Retinaディスプレイを意識した場合、無駄に画像を使うよりは、webフォントやSVGにする方が断然綺麗です。

https://fontawesome.com

こんな感じで徐々にサイトデザインは完成に向かっています。