Webサイトをデザインする【良いデザインを生み出すには?】

今回はいよいよ!サイトのデザインについて考えていきたいと思います。

【FC2・忍者・アメブロ・はてなブログ】無料ホームページ・ブログサービスを比較してみたでも書きかましたが、デザインのはじめは真似ることだと思ってます。

ゼロから生み出すのはとてもとても難しいものです。
でもいろんなサイトを見て、デザインを見て、それを自分なりに解釈して、もっとこうしたい、ああしたい…そうしていくと今までにない素敵なデザインが完成したりします!

大体サイトを2、3個に絞って見ていくと参考になります。

その参考サイトを選ぶポイントとしては
1️⃣カラーで選ぶ
2️⃣テイスト(かわいいとかかっこいいとか)で選ぶ
3️⃣作るサイトの業種やテーマで選ぶ
これの組み合わせかと思います。

今回はその際に大変便利なまとめサイト様をご紹介します!

Web系

🌟Webデザインの見本帳

Webデザイナーならみんな知ってるまとめサイト。
印象、色、ジャンルから探せるので、自分の求める参考サイトがきっと見つかります!
個人的に、厳選していいサイトを掲載しているイメージです。

🌟イケサイ

Webデザイナーなら以下略
業種カテゴリと色から探せます。
個人的に、更新頻度が高く新しい情報を確認できるイメージです。

🌟Web Design Clip

Webデザイナーなら以下略
上部メニューのメインカラー、サブカラー、レイアウト、カテゴリー、タグから探せます(知らなかった)。
採用サイトにも特化しているようです。

🌟bookma! v3

ググったら見つけました!
左メニューのリージョン(国内・国外)、カラー、バックグラウンドカラー、テイスト、カテゴリーから探せます。
バックグラウンドカラーからも探せるのはいいですね!

LP系

せっかくなので本業でお世話になってるLP(ランディングページ)版もご紹介します!

🌟LP アーカイブ

カラー、カテゴリ、イメージから探せます。
LPに関する記事もかなり勉強になるのでオヌヌメ。

🌟Web Design Clip [L]

Web Design ClipのLP版。
上部メニューのメインカラー、サブカラー、カテゴリー、タグから探せます(知らなかった)。

参考サイトを選んだら

好きな参考サイトを選んだらいよいよデザインしていきましょう。
がんばれ!!(丸投げ)

いやもうね、こればっかりはね…

ひとつ、私がよくやるのは、参考サイトを足して割ることです。
3つ選んだなら、それを全部足して3で割ったものを作ると、素早くいいものが作れます。
これぞなんちゃってWebデザイナー!(ドヤ顔でいうことじゃない)

試しに一つ作ってみた

例えばなんか青っぽくてかっこいい作品紹介サイトを作りたい!とします。

参考サイトを選びましょう!
今回は青で作りたいので青系のサイトを選んでみます!

なんかめっちゃかっこいい!

ビックリビッグローブモバイル

格安SIMが驚きの月額換算700円(税別)から | ビックリビッグローブモバイル
https://join.biglobe.ne.jp/mobile/special/

Bのアクセントも効いてます!

下層ページもめっちゃいい!

ナブコ自動ドア

ナブコ自動ドア
https://nabco.nabtesco.com/

青枠が良い感じです!
やっぱり白背景は画像が映えますね!

レイアウトめっちゃいい!

バルコムグループ 新卒採用

バルコムグループ 新卒採用
http://www.balcom.jp/recruit/fresh/

グリッドレイアウトは見ていて安心感があります!

——————————

ということで、なんか青くて白くてグリッドなかっこいい作品紹介サイトを作りましょう!!
このように、参考サイトを見ることでより具体的な完成イメージを得ることができます。

じゃん!

ててとポートフォリオをあわせてteteフォリオ(笑)

内容がないからあまり参考にならないけど、斜めの図形でグリッドで単調な中にも動きとスタイリッシュさをだしました。
青枠は全体がまとまってみえて、かつ、かわいいのでいいのですが、参考にあまり寄せすぎるとただの真似っこどんどんになるので、実際は入れないほうがいいかもですね~
でもこういう表現手法もあるのだと知っておくことはとても大切です!
いつか必ず役立ちます!!

よりよいイメージをもってよりよい形を作っていこう

いかがでしたでしょうか。

どんなサイトにしようか考えてる時が一番わくわくしますね!
今回の裏話としては例にするデザインが全然かっこよくできなくて地味に時間かかりました笑
デザインってむずかしいな~🙄

デザインは、はじめは真似ることからでも、だんだんと自分なりのイメージをもって、それをより具体的なものにしていって、あとは形を近づけていく作業だと思います。
言葉で書くのは簡単ですが、私は4年デザイン学部に通ってギリギリできるようになったかなって感じです。

良いデザインを作るには費やす時間も制作の時間もかかるけど、どれも大切なものだと思います。
あと沢山良いデザインを目にして吸収していくこと!
最高のものを生み出せるよう、あきらめずに続けていきたいですね。

※今回の方法はあくまでも個人の主観による一例です。

レスポンシブWebデザインについて考えよう【デメリットを補うには?】

レスポンシブサイト多いですね。
レスポンシブは消去法で最適だけど、最強・万能ではないと思っています😔

レスポンシブの欠点を「でもどうにかして!!」と言われないようにどういった対処ができるか、レスポンシブについてもう一度よく考えてみようと思います🙋

外でパソコンを広げ、青空コーディングをする女の子




レスポンシブWebデザインとは?

デバイスに関係なく、同じURLで同じHTMLコードを使用し、画面幅によってコンテンツサイズが変わるデザインのこと。

少し前までスマートフォンは大体みんな320pxだったので、PC用とスマホ用のHTMLコードを用意してデバイスによってそれぞれを読み込ませればよかったのですが、さまざまなデバイスサイズが存在する昨今、その方法では対応するのが難しくなってきました。

そこで採用されるのがレスポンシブWebデザイン
これで万事解決!

そう思われそうですが、レスポンシブにもメリットとデメリットがあります。

レスポンシブにするメリット

🙆多くの人に見てもらえる

レスポンシブにするとき使用するCSS3は現在ほとんどのブラウザでサポートされているため、多くの人に見てもらうことが可能です。

🙆同一コードを利用するため管理が楽

更新が頻繁にあるサイトの場合、これは重要になってきます。
PC用とスマホ用で2つコードかあると、どちらも更新しなければなりません。

レスポンシブで同一コードの場合、更新は1つのコードで済むので、更新忘れやスマホだけ古いまま…といったことを防げます。

またユーザーのデバイスに適した表示をするので、SNSでシェアされやすいという利点もあります。

🙆Googleに推奨されている

同一コードを利用するため、このデバイスではエラーが出るといった事態を防ぐことができユーザビリティの向上につながります。
またGoogle検索エンジンのクローラーの巡回の手間が少なくなります。
よってGoogleはレスポンシブデザインの使用を推奨しているようです。

Googleの検索順位に関係するモバイルフレンドリーや今後導入するとされているモバイルファーストインデックスにも適しています。

☝️モバイルフレンドリー
スマホでの閲覧に適したページの順位を引き上げ、適していないサイトを引き下げるGoogleのアルゴリズム。

モバイル フレンドリー テスト – Google Search Console

☝️モバイルファーストインデックス
これまでPCサイトの内容を元に評価していたのを、スマートフォンを主軸に評価しインデックス(検索エンジンのデータベースに登録)すること。
評価には様々な基準があり、今後導入予定とGoogleが発表しました。

🙆今後出てくるかもしれないデバイス幅にも対応できる

レスポンシブにしておけば今後もし新たなサイズのデバイスが出てもすぐに対応可能です。




レスポンシブのデメリット

🙅表示速度が遅くなる

同一コードのため、PCとスマホ両方のコードを読み込んでしまう、スマホでもPC用の大きな画像を読み込んでしまうため、特にスマホではページの表示速度が遅くなります。

🙅構築が大変

「同一コードなら作るの楽なんじゃない?」と思われそうですが、基本的に画面に横スクロールバーがでないよう、どの画面幅に対しても綺麗なレイアウトで見せなければならないため、工数は増え構築は繁雑になります。

🙅構築が大変

特に凝ったデザインで複雑なレイアウトだったり、対応デバイスが増えるほどコーディングは大変です。

🙅構築が大変

大事なことなのでもう5回くらい言いたい笑

🙅デザインやレイアウトが制限される

シンプルなデザイン・レイアウトでないとレスポンシブ対応はなかなか難しいです。
凝ったデザインでもなんとかなる場合もありますが、やはり表示速度が遅くなるなどデメリットが目立ってきます。

🙅スマホでのコンテンツ量が多くなり見にくくなる

テキストや画像を沢山載せたページの場合、PCでは見やすくてもスマホの小さい画面になると情報量が多すぎて見にくくなってしまいます。

🙅IE8以下は未対応

CSS3は多くのブラウザ対応とはいえ、IE8以下は残念ながら未対応です😔




レスポンシブの欠点を補うには?

欠点を説明しても、「やっぱりレスポンシブがいい!」となることは多いと思います。
構築が大変とか見る人には関係ないもんね…そうすると利点の方が多いもんね…
完成した後「なんか表示遅くね?」とか「デザイン変わってるじゃん!!」とか言われないために、では、どういった対策ができるでしょうか。

🙋レスポンシブが本当に必要か確認をする

できればデザインを作る前に、レスポンシブかどうか確認した方が今後自分の首を絞めることがなくなります。

🙋ブレイクポイントを詰める

たとえば750px以下はレスポンシブだけど、それ以上は横スクロールバーが表示されるとか、なんちゃってレスポンシブの提案もいいかもしれません。
PC、スマホ、タブレット以外で、わざわざブラウザの画面幅縮めて見るのなんてそうそうない…
動画サイトとお絵かきソフトで2画面するときくらいでしょ…でしょ!!?

ちなみにこのサイトはなんちゃってレスポンシブサイトです(

☝️ブレイクポイント
ブラウザ画面を縮めていったときレイアウトが切り替わるポイントのこと。
CSSで調整する。

🙋できるだけシンプルなデザインにする

デザイナー()としては凝ったデザインにしたいわけですよ!!!
でもそうすると自分の首が絞まるわけですよ!!!!

🙋できるだけテキストベースで作る

画像ベースだと上記のデメリットでページ表示速度が遅くなってしまうので、できるだけテキストベースで作るのが良いかもしれません。
結果工数が増えます笑

どうしてもデザイン性重視で画像を使用する場合は、スライス時に普通なら2、3枚にするところを1枚にし、さらに解像度を下げるなどしてデータを軽くすると良いようです。

🙋スマホメインで作る

スマホ用の画像やCSSを先に記述し読み込ませると、スマホの表示速度が少し早くなるかもしれません。
PCコンテンツ量が多い場合はスマホのコンテンツ量を調整することも必要です。

☝️モバイルファースト
スマホで見やすく使いやすい設計にすること。
PCに比べ画面が小さく回線速度が遅いスマホの場合、スワイプによる操作を中心に、必要最小限の情報を適切なレイアウトで表示させることが必要となる。

🙋jsでIE8以下にも対応させる

jsを利用することでIE8以下にHTML5、CSS3を対応できるようです。

IE8以下でもレスポンシブサイトを有効にする




結局どうすればいいんだってばよ

①レスポンシブが必要かどうかよく考え
②盛り込む情報を精査、スマホでも見やすい設計にし
③テキストベースでPC・スマホ共に構築しやすいレイアウト、デザインにし
④必要に応じてIE8以下にも対応させる

ということだってばよ!!

今のところ全てを網羅するようなベストな代替策は私のようななんちゃってWebデザイナーには考えもつきませんが、きっと今後いろんなアイディアがもっと生まれてくると思います。
同時に問題ももっと生まれたりしないといいね😉まじで😉

あとレスポンシブがこんなに大変って思うのは私の力量不足もあるのかも…とか…
今後もっと勉強していこうと思います!




【参考サイト様】
レスポンシブデザインとは|今更きけない基礎知識とメリット・デメリット|ferret [フェレット]
レスポンシブWebデザインについて知っておきたいこと【作り方入門編】 : ビジネスとIT活用に役立つ情報
モバイルフレンドリーとは?対応して順位を下げないための基礎知識|ferret [フェレット]
モバイルファーストインデックスとは? SEOへの影響と対応方法
【速報】モバイルファーストインデックス、Googleの本番環境にて既に導入が開始 現在の状況と必要な対策とは?
モバイルファーストとは?スマートフォンサイトをデザインする時の考え方 | デジタルハリウッドお役立ちWebマガジン「くりたま」

参考サイト様方、本当にありがとうございます!🙇‍♀️




Webサイトをデザインする【スマートフォン対応デザインのコツ】

サーバー、ドメインもどれにするか決めて、イメージが湧いてきたらいよいよサイトデザインです!

その前に…例のアレです…✊

マルチデバイス対応について考えよう😌

スマートフォン、タブレット、PC…
いろんな機種があり画面サイズがあります。

マルチデバイスたちです。
新機種が出るたびぐぬぬ状態です。

少し前ならPCサイトとSP(スマートフォン)サイトの2サイトを切り替えれば済む場合もありましたが、現在はSP対応といってもiPhoneだけで5、6や7、さらにPlusとサイズの違いがあります。

こうなるとレスポンシブWebデザイン(コンテンツが画面幅に合わせて変化するやつ)がいいのかなと思います。
でも設計や制作の手間、表示速度が遅かったりデザインの自由度が下がってしまったり…
欠点もたくさんあるみたいです。最善ではないんですね。

とはいえマルチデバイス対応を考えると、やっぱりレスポンシブはいいなあと思います。
ソース1個ですむし…その1個の分量が多くなるから重くなるんだけどね…笑

今回はPCのみ対応か?SPまで対応か?レスポンシブにするか??
決めておきます。

なぜならデザイン段階で、SP対応・レスポンシブの場合、押さえておきたいポイントがあるからです。

📱スマートフォン用画像は倍で作る

iPhone5で画面いっぱいの幅は320pxですが、画像を作るときは倍の640pxに合わせて作ります。
そうしないと画像がぼやけて表示されてしまいます。

PCと同じ画像を使ったらなんかぼやけてる…となるので、スマホ用画像の準備が必要となります。

スマートフォン用のデザインは幅640pxで作っておけば、ひとまず大丈夫だと思います。

さらに左右の余白は40px以上にしておくとスッキリして見えます。

スマートフォン用のデザインの左右の余白は40px以上

※640pxのとき40pxの余白を作るので、320pxにすると余白は20pxとなります。

📱スマートフォンでのフォントサイズは16px以上推奨

サイトをデザインするときは、基本的にHTMLでのテキスト部分も制作しておきます。

スマートフォン用デザインの場合、フォントサイズは16px以上推奨です。
できれば18pxはほしい…!
小さくても14pxかな、と思います。

このサイトはスマートフォンで12pxなのでちょっと小さいですね。
だめじゃん!笑

そしてボタンもできるだけ大きく作ると使いやすいサイトになります。
なおこのサイトは…🤗

スマートフォン対応はできるだけやっておこう

スマートフォン普及率が上がる昨今、サイトへのアクセスもPCよりスマホからが多いです。
スマホ対応は必然といえるかと思います。

難しそうですが、先にPC用のデザインを制作して、SP用にリサイズしていくと作りやすいです。
PC用デザインを複雑にしてしまうとSP用の制作が難しくなるかもしれないので、できるだけシンプルにした方がいいかと思います。

次回は例を交えて実践していきます!
その次になるかもですが、これさえあればきっとなんとかなる!という魔法の呪文もお知らせします。

大丈夫です、スマートフォン対応こわくないですよ!👍

◀️PREV
【ムームードメイン・ロリポップ・エックスサーバー・お名前.com】独自ドメイン最強伝説

🎀WebデザイナーによるWebサイトの作り方



colorboxをスマートフォンで表示させるためのカスタマイズ

絵描きさんは絵を描く休憩に絵を描くっていうけどサイト作る休憩にサイトを作るという暴挙(
レスポンシブむつかしかったんや…パソコン用から完成させるね

さて、このサイトでは、画像の拡大表示に「colorbox」を使用させていただいております。
※現在未使用です。

今回休憩にサイトのスマートフォン対応を進めているんですが、colorboxをPCと同じに使っていると
画像が超でかくなったり、変な位置に表示されたり、背景(拡大したとき暗くなるとこ)の下に表示されたりしちゃいます。

151108_01.jpg 151108_02.jpg

そこで回避策を実行しました。
一部無理やりで正しいのかわからないけどwメモしておきます!

パソコンと同じhtmlを使う場合でjsやメディアクエリなんかを使って振り分けている想定です。
jsは詳しくないのもあり(^q^)ここは省略します!

あとcolorboxのデザインはデフォルトで、実機検証はiPhone5です。

「スマートフォンの場合colorboxを使用させない」という手もあるかと思いますがむつかしくてできませんでした(^q^(^q^(^q^笑

それでは回避策です。




1.拡大画像が画面からはみ出て、大きく表示されてしまう

151108_07.jpg

jQueryのlightbox系のプラグインColorboxをiPhone(スマホ)で使う」(kagzugiの備忘録 様)

にあるソースをお借りします。

ちなみに画像の高さがブラウザサイズ内になる「maxHeight」を使うと、縦に長いイラストが小さくなり、このサイトの場合PCで見にくくなっちゃいます。twitterみたいに

ひとまずは速さもおいて、[]内も適宜変え、下記のように書きました。

<script type="text/javascript">
$(function() {
$('a[class^=group1]').colorbox({maxWidth:'100%'});
});
</script>

これで画像がスマートフォンでも見やすいサイズになりました。




2.変な位置に表示されてしまう

151108_03.jpg

サイズはなおったけど
表示領域を超えていたり、それで逆に画像が小さくなりすぎたり
ページが全面に表示されなかったり…

そういうときは「jquery.colorbox.js」を触ります。

このjs内の「initialWidth」と「initialHeight」は画像が表示される前、あのクルクル回ってるやつが出るときのサイズです。

151108_08.jpg

これが600とかスマートフォンの幅より大きいと、
変な表示になってしまいます。ですので

initialWidth: "250",
initialHeight: "100",

としてみました。

iphone5できれいに表示されました。

これで表示領域を超えてしまうことはなくなります。

ちなみに、1でおいておいた速さですがここで「speed」の数値を変えても反映されるのかな…?
検証はしてません(X3_ヽ)_



3.画像が背景の下に表示されてしまう

151108_04.jpg

2でうまくいかない場合も活用できます。

スマートフォン(android・iPhone)に告ぐ!Lightbox 表示したければ、jquery.colorbox.js だ!!
(BLUE STYLE LOG 様)

を参考にさせていただきました。

1のソースに書き足します。

<script type="text/javascript">
$(function() {
$('a[class^=group1]').colorbox({maxWidth:'100%',top:true});
});
</script>

これで通常通り背景の上、中央に表示されます。

が、記事の通り、画像表示位置は上部に固定されてしまいます。

スマートフォンだけならしょうがないかな…と思いましたが、そういえばPCと共用のソースでした。

head内のjsなので、cssでの振り分けはできません。
振り分けるjs、書けません笑

そこで強行策です。
スマートフォンではもう背景を消してしまいましょう!

z-indexとかやってみたけどちょっと違うのかなあって…
背景がなければ潜ることもできなくなるだろうふははは

触るのは「colorbox.css」です。
メディアクエリを使えば、スマートフォンのみで適用できます。

#cboxOverlay{
background:url(images/overlay.png) repeat 0 0;
}
↓
#cboxOverlay{
background:none;
}

これで背景は非表示になります。

デザイン的にはおしい感じになるけど画面いっぱいに画像が表示されるスマートフォンなら
背景なくてもまあいいかなあと思いました。

※今回変更したcolorboxのjs、css以外をアップして公開してみたところ、上記2、3の現象は起きませんでした。
どっかへんな書き方してたのかな…
ということで変更部分は、以下のおまけと2の「initialWidth」と「initialHeight」の数値
(不具合はないが表示がずれていて気になったので)のみです。
(2015.5.1追記)




おまけ
長いタイトルを全文表示させる

151108_05.jpg 151108_09.jpg

画像の下に表示されるテキスト、hrefの「title」に書いてる部分ですが、私のサイトをスマートフォンで見ると最大3行になるようです。

でも1行しかちゃんと読めなかったりボタンの下に隠れてしまったり…
そんなときは4と同じく「colorbox.css」を修正します。

まずは画像下の余白を広げます。

#cboxLoadedContent{
margin-bottom:28px;
}
↓
#cboxLoadedContent{
margin-bottom:100px;
}

ボタンの位置も変えましょう。

「#cboxPrevious」「#cboxNext」「#cboxClose」の

bottom:0;
↓
bottom:70px;

これで短いテキストだと、デザイン的には残念な感じになるけど笑
長いテキストも読めるようになりました。

151108_06.jpg

以上、「スマホ?スマフォ?わかんないからスマートフォンって書こう」
間違えました、「colorboxをスマートフォンで表示させるためのカスタマイズ」でした。
参考サイト様方、本当にありがとうございます!

ちなみに「colorbox.css」でのid名はもしかしたら変わってたりするかもなので念のためデベロッパーツールなどで確認してみると良いかと思います!

ああ~~マルチデバイスススススs




【FC2】個別ページに追記が表示されない/親カテゴリ番号ってどれ!?

サイトとブログの更新に明け暮れる日々…
そして追記の不具合とか修正できたのでメモメモ!
FC2ブログカスタマイズについてです。

■個別ページに追記が表示されない

知恵袋の既出で解決できました!
本当にありがとうございます。
文末にリンク張らせていただきます。

リンク切れとか心配なので
一応自分なりにメモを。

原因は知恵袋の件とまったく同じで

<!–more_link–> ~ <!–/more_link–>
<!–more–> ~ <!–/more–>

とするところが

<!–more_link–> ~ <!–/more–>

になっていたからでした。

これは解答コメントにもあるように
FC2ブログ公式マニュアルの「テンプレート用 変数一覧」を
参考にするとよくわかります。

つまり
<!–more_link–> ~ <!–/more_link–>
が個別じゃないページ、
<!–more–> ~ <!–/more–>
が個別ページの追記設定というわけですな。

どちらも設定しなければならぬということでFAです。おっけー!

ちなみに
<!–more–><%topentry_more><!–/more–>
とすれば、個別ページでは追記も含めて全文表示と
使い分けることが可能なわけですね!

あっあとカスタマイズ時に中途半端な
変なところで改行しちゃうと上手くいかないこともあるのでちゅうい!

コメントアウトタグだから特に意味ないんだと思ってた…
あれ、コメントアウトだよね?変数??
べ勉強不足がばれちゃうじゃないですかーヤダー!
このタグ含めて変数名ってことなんかな…

でも例えコメントアウトでも始まりと終わりは
合わせるべきだと思うので、気をつけたいでございまする。
む、無理矢理まとめたとかじゃ、ね、ねーし。

■親カテゴリ番号ってどれ!?

カテゴリを共有プラグインをお借りして開閉式にしました!
「CustomCategory」です。ありがとうございます!

こちらのプラグインとっても魅力的でですね、
機能の一つに、親カテゴリを始めから閉じとくか開いとくかの
設定ができるんですね!

そこで必要になるのが「親カテゴリ番号」。
jsカスタマイズでは「CC_P(番号)」を指定するんですが
カテゴリ編集ページのカテゴリ順番の番号を入れても動かないんです!笑
やめろそんな目でみるなよお!
順番変えるたびjs書き直すん…?って思ったから
これじゃないだろうとも思ったけど!
わかんなかったんだよお!!

ここで入れるのは、親カテゴリ名をクリックしたときURLに出る番号なんです。
たぶんカテゴリを登録した順の番号だと思います。たぶん。

例えばこのブログなら、「少年・青年漫画」をクリックした先の
http://inside33in.blog.fc2.com/blog-category-27.html
の「27」が親カテゴリ番号というわけです!
つまり「CC_P27」を書き加えればいいってことね!わあい!

以下にもっと詳しくありますので気になった方はぜひ。

「Yahoo知恵袋」 追記を折りたたみに変更すると、 記事個別ページの追記部分が表示されなくなった…
「FC2ブログ公式マニュアル」 テンプレート用 変数一覧
「ブログテンプレートならHKD」 CustomCategoryカスタマイズ【初期で常に閉じるカテゴリーの設定】
「Novel テンプレート」 特定のカテゴリの記事だけを通常ブログ画面で表示する-カテゴリの番号の確認

参考サイト様方、本当にありがとうございます。