LPに使えそうなボタンが…でっかくなｃｃｈ👂👂👂
大小にアニメーションするボタン。
LPなので勝手に画像ボタンを想定。
<div class="cv_btn"> <a href="#"><img src="画像URL"></a> </div>
.cv_btn {
margin: 0 auto;
}
.cv_btn img {
animation: anime1 0.5s ease 0s infinite alternate;
transform-origin:center;
}
@keyframes anime1 {
from {
transform: scale(0.9,0.9);
}
to {
transform: scale(1,1);
}
}
cssで作る開閉で向きが変わる矢印付きアコーディオン！！！（タイトルママ
こちらのサイト様の合わせ技です。
ありがとうございます😭😭
とはいえやっと人様に還元できるようなコードが書けたよ。
「バー」を押すとアコーディオンが開いて、矢印の向きが変わるよ。
バーや内容にimgを指定することもできる。
inputのid名とlabel名を連動させるのがポイント。
つまり3つ目を増やすときはcssにmenu_bar03を追加する。
<div class="menu">
<input type="checkbox" id="menu_bar01" />
<label for="menu_bar01">バー01</label>
<ul id="links01">
<li>内容01-A</li>
<li>内容01-B</li>
<li>内容01-C</li>
</ul>
<input type="checkbox" id="menu_bar02" />
<label for="menu_bar02">バー02</label>
<ul id="links02">
<li>内容02-A</li>
<li>内容02-B</li>
<li>内容02-C</li>
</ul>
</div>
アニメーションを矢印のcssに追加すると、矢印がクルっとなってたのしい。
/*アコーディオン全体*/
.menu {
width: 100%;
padding: 10px 10px 20px;
}
.menu input {
display: none; /*チェックボックスを隠す*/
}
/*バー部分*/
.menu label {
cursor :pointer;
display: block;
text-decoration: none;
color: #fff;
line-height: 1;
position: relative;
margin: 0 0 10px;
padding: 10px;
background-color: #333;
}
/*開いたときに表示される部分*/
.menu ul {
margin: 0;
padding: 0;
list-style: none;
margin-bottom: 1px;
}
.menu li {
max-height: 0;
overflow-y: hidden;
-webkit-transition: all 0.5s; /*閉じるときのアニメーション*/
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
#menu_bar01:checked ~ #links01 li,
#menu_bar02:checked ~ #links02 li {
max-height: 30px; /*開いたときに表示されるliの高さ*/
opacity: 1;
-webkit-transition: all 0.5s; /*開くときのアニメーション*/
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
/*開いたときの下の余白*/
#menu_bar01:checked ~ #links01 li:last-child,
#menu_bar02:checked ~ #links02 li:last-child {
margin-bottom: 20px;
}
/*閉じた状態の矢印描画*/
.menu label:after{
content:"";
display:block;
width:8px;
height:8px;
border-top: #fff 2px solid;
border-right: #fff 2px solid;
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
position:absolute;
right: 2%;
top: 0;
bottom: 15%;
margin:auto;
}
/*開いた状態の矢印描画*/
.menu input[type=checkbox]:checked + label:after{
content:"";
display:block;
width:8px;
height:8px;
border-top: #fff 2px solid;
border-right: #fff 2px solid;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
position:absolute;
right: 2%;
top: 7%;
bottom: 0;
margin:auto;
}
こちらは左に＞の矢印Verで、さらにめちゃくちゃ勉強になるサイト様🗽
今回はいよいよ！サイトのデザインについて考えていきたいと思います。
【FC2・忍者・アメブロ・はてなブログ】無料ホームページ・ブログサービスを比較してみたでも書きかましたが、デザインのはじめは真似ることだと思ってます。
ゼロから生み出すのはとてもとても難しいものです。
でもいろんなサイトを見て、デザインを見て、それを自分なりに解釈して、もっとこうしたい、ああしたい…そうしていくと今までにない素敵なデザインが完成したりします！
大体サイトを2、3個に絞って見ていくと参考になります。
その参考サイトを選ぶポイントとしては
1️⃣カラーで選ぶ
2️⃣テイスト（かわいいとかかっこいいとか）で選ぶ
3️⃣作るサイトの業種やテーマで選ぶ
これの組み合わせかと思います。
今回はその際に大変便利なまとめサイト様をご紹介します！
Webデザイナーならみんな知ってるまとめサイト。
印象、色、ジャンルから探せるので、自分の求める参考サイトがきっと見つかります！
個人的に、厳選していいサイトを掲載しているイメージです。
Webデザイナーなら以下略
業種カテゴリと色から探せます。
個人的に、更新頻度が高く新しい情報を確認できるイメージです。
Webデザイナーなら以下略
上部メニューのメインカラー、サブカラー、レイアウト、カテゴリー、タグから探せます（知らなかった）。
採用サイトにも特化しているようです。
ググったら見つけました！
左メニューのリージョン（国内・国外）、カラー、バックグラウンドカラー、テイスト、カテゴリーから探せます。
バックグラウンドカラーからも探せるのはいいですね！
せっかくなので本業でお世話になってるLP（ランディングページ）版もご紹介します！
カラー、カテゴリ、イメージから探せます。
LPに関する記事もかなり勉強になるのでオヌヌメ。
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年デザイン学部に通ってギリギリできるようになったかなって感じです。
良いデザインを作るには費やす時間も制作の時間もかかるけど、どれも大切なものだと思います。
あと沢山良いデザインを目にして吸収していくこと！
最高のものを生み出せるよう、あきらめずに続けていきたいですね。
※今回の方法はあくまでも個人の主観による一例です。
レスポンシブサイト多いですね。
レスポンシブは消去法で最適だけど、最強・万能ではないと思っています😔
レスポンシブの欠点を「でもどうにかして！！」と言われないようにどういった対処ができるか、レスポンシブについてもう一度よく考えてみようと思います🙋
デバイスに関係なく、同じURLで同じHTMLコードを使用し、画面幅によってコンテンツサイズが変わるデザインのこと。
少し前までスマートフォンは大体みんな320pxだったので、PC用とスマホ用のHTMLコードを用意してデバイスによってそれぞれを読み込ませればよかったのですが、さまざまなデバイスサイズが存在する昨今、その方法では対応するのが難しくなってきました。
そこで採用されるのがレスポンシブWebデザイン。
これで万事解決！
そう思われそうですが、レスポンシブにもメリットとデメリットがあります。
レスポンシブにするとき使用するCSS3は現在ほとんどのブラウザでサポートされているため、多くの人に見てもらうことが可能です。
更新が頻繁にあるサイトの場合、これは重要になってきます。
PC用とスマホ用で2つコードかあると、どちらも更新しなければなりません。
レスポンシブで同一コードの場合、更新は1つのコードで済むので、更新忘れやスマホだけ古いまま…といったことを防げます。
またユーザーのデバイスに適した表示をするので、SNSでシェアされやすいという利点もあります。
同一コードを利用するため、このデバイスではエラーが出るといった事態を防ぐことができユーザビリティの向上につながります。
またGoogle検索エンジンのクローラーの巡回の手間が少なくなります。
よってGoogleはレスポンシブデザインの使用を推奨しているようです。
Googleの検索順位に関係するモバイルフレンドリーや今後導入するとされているモバイルファーストインデックスにも適しています。
☝️モバイルフレンドリー
スマホでの閲覧に適したページの順位を引き上げ、適していないサイトを引き下げるGoogleのアルゴリズム。
モバイル フレンドリー テスト - Google Search Console
☝️モバイルファーストインデックス
これまでPCサイトの内容を元に評価していたのを、スマートフォンを主軸に評価しインデックス（検索エンジンのデータベースに登録）すること。
評価には様々な基準があり、今後導入予定とGoogleが発表しました。
レスポンシブにしておけば今後もし新たなサイズのデバイスが出てもすぐに対応可能です。
同一コードのため、PCとスマホ両方のコードを読み込んでしまう、スマホでもPC用の大きな画像を読み込んでしまうため、特にスマホではページの表示速度が遅くなります。
「同一コードなら作るの楽なんじゃない？」と思われそうですが、基本的に画面に横スクロールバーがでないよう、どの画面幅に対しても綺麗なレイアウトで見せなければならないため、工数は増え構築は繁雑になります。
特に凝ったデザインで複雑なレイアウトだったり、対応デバイスが増えるほどコーディングは大変です。
大事なことなのでもう5回くらい言いたい笑
シンプルなデザイン・レイアウトでないとレスポンシブ対応はなかなか難しいです。
凝ったデザインでもなんとかなる場合もありますが、やはり表示速度が遅くなるなどデメリットが目立ってきます。
テキストや画像を沢山載せたページの場合、PCでは見やすくてもスマホの小さい画面になると情報量が多すぎて見にくくなってしまいます。
CSS3は多くのブラウザ対応とはいえ、IE8以下は残念ながら未対応です😔
欠点を説明しても、「やっぱりレスポンシブがいい！」となることは多いと思います。
構築が大変とか見る人には関係ないもんね…そうすると利点の方が多いもんね…
完成した後「なんか表示遅くね？」とか「デザイン変わってるじゃん！！」とか言われないために、では、どういった対策ができるでしょうか。
できればデザインを作る前に、レスポンシブかどうか確認した方が今後自分の首を絞めることがなくなります。
たとえば750px以下はレスポンシブだけど、それ以上は横スクロールバーが表示されるとか、なんちゃってレスポンシブの提案もいいかもしれません。
PC、スマホ、タブレット以外で、わざわざブラウザの画面幅縮めて見るのなんてそうそうない…
動画サイトとお絵かきソフトで2画面するときくらいでしょ…でしょ！！？
ちなみにこのサイトはなんちゃってレスポンシブサイトです（
☝️ブレイクポイント
ブラウザ画面を縮めていったときレイアウトが切り替わるポイントのこと。
CSSで調整する。
デザイナー（）としては凝ったデザインにしたいわけですよ！！！
でもそうすると自分の首が絞まるわけですよ！！！！
画像ベースだと上記のデメリットでページ表示速度が遅くなってしまうので、できるだけテキストベースで作るのが良いかもしれません。
結果工数が増えます笑
どうしてもデザイン性重視で画像を使用する場合は、スライス時に普通なら2、3枚にするところを1枚にし、さらに解像度を下げるなどしてデータを軽くすると良いようです。
スマホ用の画像やCSSを先に記述し読み込ませると、スマホの表示速度が少し早くなるかもしれません。
PCコンテンツ量が多い場合はスマホのコンテンツ量を調整することも必要です。
☝️モバイルファースト
スマホで見やすく使いやすい設計にすること。
PCに比べ画面が小さく回線速度が遅いスマホの場合、スワイプによる操作を中心に、必要最小限の情報を適切なレイアウトで表示させることが必要となる。
jsを利用することでIE8以下にHTML5、CSS3を対応できるようです。
①レスポンシブが必要かどうかよく考え
②盛り込む情報を精査、スマホでも見やすい設計にし
③テキストベースでPC・スマホ共に構築しやすいレイアウト、デザインにし
④必要に応じてIE8以下にも対応させる
ということだってばよ！！
今のところ全てを網羅するようなベストな代替策は私のようななんちゃってWebデザイナーには考えもつきませんが、きっと今後いろんなアイディアがもっと生まれてくると思います。
同時に問題ももっと生まれたりしないといいね😉まじで😉
あとレスポンシブがこんなに大変って思うのは私の力量不足もあるのかも…とか…
今後もっと勉強していこうと思います！
【参考サイト様】
・レスポンシブデザインとは｜今更きけない基礎知識とメリット・デメリット｜ferret [フェレット]
・レスポンシブWebデザインについて知っておきたいこと【作り方入門編】 : ビジネスとIT活用に役立つ情報
・モバイルフレンドリーとは？対応して順位を下げないための基礎知識｜ferret [フェレット]
・モバイルファーストインデックスとは？ SEOへの影響と対応方法
・【速報】モバイルファーストインデックス、Googleの本番環境にて既に導入が開始 現在の状況と必要な対策とは？
・モバイルファーストとは？スマートフォンサイトをデザインする時の考え方 | デジタルハリウッドお役立ちWebマガジン「くりたま」
参考サイト様方、本当にありがとうございます！🙇♀️
サーバー、ドメインもどれにするか決めて、イメージが湧いてきたらいよいよサイトデザインです！
その前に…例のアレです…✊
スマートフォン、タブレット、PC…
いろんな機種があり画面サイズがあります。
マルチなデバイスたちです。
新機種が出るたびぐぬぬ状態です。
少し前ならPCサイトとSP（スマートフォン）サイトの2サイトを切り替えれば済む場合もありましたが、現在はSP対応といってもiPhoneだけで5、6や7、さらにPlusとサイズの違いがあります。
こうなるとレスポンシブWebデザイン（コンテンツが画面幅に合わせて変化するやつ）がいいのかなと思います。
でも設計や制作の手間、表示速度が遅かったりデザインの自由度が下がってしまったり…
欠点もたくさんあるみたいです。最善ではないんですね。
とはいえマルチデバイス対応を考えると、やっぱりレスポンシブはいいなあと思います。
ソース1個ですむし…その1個の分量が多くなるから重くなるんだけどね…笑
今回はPCのみ対応か？SPまで対応か？レスポンシブにするか？？
決めておきます。
なぜならデザイン段階で、SP対応・レスポンシブの場合、押さえておきたいポイントがあるからです。
iPhone5で画面いっぱいの幅は320pxですが、画像を作るときは倍の640pxに合わせて作ります。
そうしないと画像がぼやけて表示されてしまいます。
PCと同じ画像を使ったらなんかぼやけてる…となるので、スマホ用画像の準備が必要となります。
スマートフォン用のデザインは幅640pxで作っておけば、ひとまず大丈夫だと思います。
さらに左右の余白は40px以上にしておくとスッキリして見えます。
※640pxのとき40pxの余白を作るので、320pxにすると余白は20pxとなります。
サイトをデザインするときは、基本的にHTMLでのテキスト部分も制作しておきます。
スマートフォン用デザインの場合、フォントサイズは16px以上推奨です。
できれば18pxはほしい…！
小さくても14pxかな、と思います。
このサイトはスマートフォンで12pxなのでちょっと小さいですね。
だめじゃん！笑
そしてボタンもできるだけ大きく作ると使いやすいサイトになります。
なおこのサイトは…🤗
スマートフォン普及率が上がる昨今、サイトへのアクセスもPCよりスマホからが多いです。
スマホ対応は必然といえるかと思います。
難しそうですが、先にPC用のデザインを制作して、SP用にリサイズしていくと作りやすいです。
PC用デザインを複雑にしてしまうとSP用の制作が難しくなるかもしれないので、できるだけシンプルにした方がいいかと思います。
次回は例を交えて実践していきます！
その次になるかもですが、これさえあればきっとなんとかなる！という魔法の呪文もお知らせします。
大丈夫です、スマートフォン対応こわくないですよ！👍
◀️PREV
【ムームードメイン・ロリポップ・エックスサーバー・お名前.com】独自ドメイン最強伝説
