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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

パソコン不要!スマホに音楽CDを直接取り込める「CDレコ」iPhone、Android両対応

iTunesやApple Musicの普及により、音楽はダウンロードや月額で聴くモノになり、CDを買わなくなりましたね。 更には、Apple Musicを利用する人が増えて、音楽を買うという事も減って …

IllustratorとInDesignの違いって?

初歩的な話になりますが、デザインをする時にIllustratorとInDesignどちらを使用してますか?ホントに初歩的過ぎて知ってますって方はcommand+Wをしてください(笑) ここ最近、ページ …

コレは是非欲しい!モンスターボール型バッテリー

モンスターボール モバイルバッテリー Anker 10000mA Ankerとポケモンセンターコラボのモンスターボール型モバイルバッテリーが登場したようです! このフォルムはまさにモンスターボールその …

出来るデザイナーになる為の心得7つ

いまいちデザインが出来ないってひとはたくさんいますよね。デザイナーとしてちゃんとしたデザインが出来るようになる心得を書いて行きます。 1.アプリケーションの操作を完璧に これは言うまでもなく、技術力の …

no image

ウェイト

書体の文字の太さの事。フォント名にはウェイトを表す言葉が含まれている事も多い。例えば同じ系統のデザインで太さが違うフォントには、基本のフォント名の後に、ライト(L)、レギュラー(R)、ミディアム(M) …

2018/07/30

オリジナルTシャツを簡単に作れるTシャツトリニティ

気軽にTシャツを作りたい!そんな思いを簡単に実現出来てしまうサイトがあります。 Tシャツトリニティ Tシャツトリニティ このTシャツトリニティは、パソコンやスマートフォンからでも画像を用意するだけで簡 …

2018/07/27

簡単!Photoshopで太陽を作る方法

猛暑が続くので、それにちなんで太陽のネタを書こうと思います。 以外と知らない!?Photoshopで太陽の作り方 晴れた写真を撮ると太陽の光が強すぎて、青空だったはずが、空が真っ白に飛んでしまうこと、 …

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(青)であり、全てを混ぜ合わせると白(本当は透明)になる。また、イン …

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


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

スポンサーリンク

    スポンサーリンク

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