Illustrator iPhone webデザイン デザイン

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

投稿日:2018年2月19日 更新日:

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

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

スポンサーリンク

この記事が気に入ったら
いいね ! しよう

Twitter で

-Illustrator, iPhone, webデザイン, デザイン
-

執筆者:


コメントを残す

関連記事

カラーパレット

MacやwindowsなどのOSが基本的に使用する色のセットのこと。Macとwindowsのカラーパレットはいずれも256色だが、構成が若干異なっていり。webページをデザインする場合などは、両者に共 …

ロックと隠すを利用して効率を上げよう

ロックとカットと隠すを利用して効率を上げる方法 Illustratorで効率をあげる方法があります。それはロックとカットと隠すです。 ロックはcommand+2 カットはcommand+X 隠すはco …

仕事で使ってるモニターColoredge CX240

仕事で使用しているモニターの話をしようと思います。EIZOのカラーマネージメント液晶モニター ColorEdgeシリーズの廉価版CX240です。2年ほど前に購入し、当時の価格.comの最安価格で85, …

ガンマ補正

画像をより自然に表示するための補正操作の事。ガンマとは画像の階調の応答特性を表わす数値のことであり、画像の入出力装置はそれぞれ固有のガンマ値を持っている。画像を入力から出力まで一貫して同様な色合いで表 …

デザインが出来れば副業も出来る!?

デザインがある程度出来るようになると、フリーランスを目指す人もいるかと思います。しかし、フリーランスはそこに仕事がない限り収入はゼロです。そこで沢山の人達が躊躇してしまいがちです。 そんな時、まずは副 …

スポンサーリンク

2018/04/07

レバテッククリエイターさんでこのブログが紹介されました

昨年末くらいにレバテッククリエイターというweb、ゲーム業界のクリエイター向けの求人サイトのブログで、このブログが紹介されました。ということでご紹介させていただきます。 レバテッククリエイターさんの取 …

2018/04/03

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

前回地域ポータルサイトを作ろう 第2回からさらに1ヶ月以上が経ちました。 現状は、mottokasukabe.comで確認できます。 本業のデザイン仕事で、現在とある酒蔵のホームページリニューアルがか …

2018/03/30

Illustratorショートカット集

Illustratorショートカット集 Illustratorで必須のショートカットを記しておきます。Illustratorの操作を素早くする事で仕事の効率は倍以上に早くなります。覚え方は実に簡単。そ …

DTP画像

2018/02/22

これだけでデザインが良くなる!字詰めをちゃんとしよう!

さて、タイトル通り今回は字詰めのお話。 以前、デザインで素人がやりがちな事。プロっぽく魅せるコツ。でも軽く触れたのですが、先程ディレクターの方から 「字詰めの仕方を新人に教える本とか持ってない?」 っ …

2018/02/19

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

前回地域ポータルサイトを作ろう 第1回から約1ヶ月経ちました。 あれから進んだ事は、トップページのデザインが概ね出来た事。下層ページのスマホデザインがなんとなく出来た事くらいです。 その他、サイトの構 …

クリックしていただけると助かります


デザイナーランキングへ にほんブログ村 デザインブログへ
にほんブログ村

スポンサーリンク

    スポンサーリンク