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デザイン, デザイン
-

執筆者:


コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

Google AdSenseに合格するために

このブログをはじめてまず一つの目標はGoogle AdSenseに登録する事でした。 しかし、始めたタイミングが悪かったみたいです。 ブログのデザインを始めたのが2015年の年末。 そこからWordP …

webデザインも出来る様になりたい Part.1

普段はグラフィックメインで、主に紙媒体しかやってないけど、webのデザインも出来る様になりたいって方もいると思います。もしくは、webのデザインも必要に迫られている方とかいますよね。 私も10数年前に …

Photoshopでブラシの大きさを自由自在に変える方法

Photoshopでブラシの大きさを自由自在に変える方法 Photoshopでブラシの大きさを簡単に直感的に変える方法があります。 コレは実は、以前Adobeさんのセミナーに参加した時に、Adobeさ …

ATOK2017 for Macが発売に

みなさんATOKって使ってますか? Macに標準で搭載の辞書ことえり、実は使いづらくてイライラしませんか?そんなイライラ解消のための最新版ATOK2017が6月23日に発売されるようです。 新エンジン …

no image

クリッピングパス

Photoshopのパスの機能。画像の切り抜きを指定するための輪郭線のこと。Adobe Photoshopでは、ベジェ曲線でパスを作成し、切り抜く範囲を指定する事が出来る。このデータをPSDやEPS形 …

2018/07/20

ウォータープルーフ対応Bluetoothスピーカー JBL FLIP4を買ってみました

毎日、猛暑日が続きますね!そんな夏本番を楽しくする、便利なガジェットをご紹介します! どんなシーンでも使える便利なBluetoothスピーカー JBL FLIP4です。 ちなみに、なにかと話題のスマー …

2018/06/24

35mm版(さんじゅうごみりばん)

一般的なロールタイプの写真フィルムサイズ。35mmフィルムがかつてライカに採用され全世界に広まったことから、このサイズのフォーマット(縦3.6 cm×横2.4 cm)をライカ版と呼ぶこともある。1カッ …

2018/06/24

三原色(さんげんしょく)

割合を変えて混ぜ合わせることで、あらゆる色を表現出来る3つの基本的な色のこと。光の三原色は、RED(赤)、GREEN(緑)、BLUE(青)であり、全てを混ぜ合わせると白(本当は透明)になる。また、イン …

2018/06/01

サムネイル

画像やページのイメージ等を、小さいサイズで一覧表示する機能のこと。また、その画像を指す。thumbnailは親指の爪という意味。本来は、小さなアイデアスケッチなどを指す言葉。業界的には、サムネなどと略 …

2018/04/07

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

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

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


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

スポンサーリンク

    スポンサーリンク

    %d人のブロガーが「いいね」をつけました。