レスポンシブ対応を見越したHP作りの手順
こんにちは、スウェルデザインのｗです。
モバイルフレンドリーの対応が当たり前の時代になりました。
スマホで見づらいサイトはつまはじきにされてしまいます・・
そこでレスポンシブ対応を想定したHP制作の手順
つまり、スマホ版のHPを作らなければならなくなった時困らない様に
レスポンシブにしやすい土台のHP作りをしていきましょうという内容です。
レスポンシブサイトの土台作り
デザイン・構成
グリットシステムを基にデザインしていく
グリットシステムとは？
端末によって均等に表示されるように、ページのデザインや構成はグリットを基にして練っていきます。
レスポンシブデザインに特化したGrid Systemは複数あるので、作りたいサイトに合ったものを選びます。
一部紹介
Bootstrapでグリッドシステムだけ使いたい場合、カスタマイズしたものをダウンロードすればいい。
960 Grid System：ページの幅960pxを基準にして、設計するグリッドデザインを紹介
コーディング
viewportの設定
モバイルブラウザでのレイアウトを制御するためにmetaタグのviewportを使います。
下記ソースをheader内に記述
アクセスしたデバイスの横幅に合わせるためにwidth=device-widthを指定。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <!--最小限のビューポート設定--> <meta name="viewport" content="width=device-width">
CSSの個別指定
アクセスしてきた端末の画面サイズに合わせて読み込むCSSを変えます。
基本のCSSとその他複数で分け、必要な部分のみCSSの読み込みを行い上書きするという仕組みです。
①下記ソースをheaderに記述
<link rel="stylesheet" media="all" type="text/css" href="style.css" /> <!-- ※デフォルトのスタイル（style.css） --> <link rel="stylesheet" media="all" type="text/css" href="tablet.css" /> <!-- ※タブレット用のスタイル（tablet.css） --> <link rel="stylesheet" media="all" type="text/css" href="smart.css" /> <!-- ※スマートフォン用のスタイル（smart.css） -->
②各CSSに下記コードを記述
※必ず｛｝の中にCSSを書き込むこと。
@media screen and (min-width:961px) {
/*pc用のcssを記述*/
}
@media only screen and (min-width:376px) and (max-width:960px) {
/*tablet用のcssを記述*/
}
@media screen and (max-width:375px) {
/*スマホ用のcssを記述*/
}
可変する画像の設定
端末の画面によって画像が正しく表示されるようにCSSへ指定します。
img {max-width:100%;}
画面サイズにより表示したくない要素の処理
下記コードを各CSSにて記述
※それぞれのCSSで表示非表示を両方記述しなければPC版で消したままスマホ版でも表示されないので
スマホ版の方にはdisplay:block;などで表示させること
img {display:none;}
SEO対策におけるキーワード選択
こんにちは、スウェルデザインのｗです。
今回は効果的なキーワード選出
の為の手順を記録していきます。
ステップ1 事実を知る
知った時はこの手があったのか～と思いました。
単純です。
Googleの検索ボックスに、目的のキーワードを入れてみましょう。
するとこのように関連検索ワードが出てきます。
これが実際に検索回数の多い組み合わせになります。
しかしこれだけでなく、下記リンクのサービスを利用する事で
もっと沢山の補助キーワードを知ることができます。
ステップ2 キーワードの検索ボリュームを知る
1で集まったキーワードが、実際にどのくらい検索されているのか
月々の指数を知ることができます。
有名ですが、GoogleのサービスGoogleキーワードプランナーです。
このツールでより有力なキーワードが実際の数値で解ります。
後はページに合ったキーワードを選出してmetaタグに書き込みましょう。
外部SEO対策とコンテンツについて
こんにちは、スウェルデザインのｗです。
SEOについて学び始めたばかりですが
知れば知るほど、昨今のユーザーが必要としている情報は従来のSEOでは追いつけていないのではないかと感じます。
SEOだけでは衰退してゆくということも加味して付き合い方を考えていかなければならないのでは？と思うようになりました。
具体的には、視覚的情報を増やしGoogleだけに頼らない情報の発信が必要と考えます。
なぜならSEOと言うのはテキストベースで力を発揮するものだからです。
情報のやり取りがイメージベースで行われている現代では、Googleのちからだけではその内容までは理解できません
顕著にその傾向を表しているのはInstagramやここ数年で一気に進出しているSNSです。
FacebookやTwitterなど、頻繁にインターネットを活用する人の殆どは何かしらのSNSアカウントを持っているのではないでしょうか。
そして多くの人がイメージを使って情報のやり取りをしています。
今日食べたランチから通っているジムまでその範囲は広大です。
ここで注目されるのはその情報伝達の速さ、コミュニティを利用したマーケティング戦略が成功しているという点です。
ホームページ内にとどまらず、時代は最早見に来てもらうという形態から
様々な方法でアピールし、見せに行く形へと変化しているのでしょう
しかし、一般的な検索エンジンではイメージ情報の解析ができないためヒットすることも少ないのです。
ですから最新の情報は何かしらのSNSを使って得ることが必須といって過言ではないでしょう。
以上のことをふまえて、企業や店舗は積極的にSNSへ参入すべきと考えます。
FacebookやGoogleなどではビジネス専用のページを設けられるなど配慮された作りとなっている為、運用も容易でしょう。
SNSで投稿された内容は検索エンジンにとってもヒットしやすく、投稿自体の評価や『いいね』が高ければ、それも検索上位に入る要因となるでしょう。
下記は最低限登録した方がいいSNSや情報提供サイトになります。
以上三3点のサイトをご活用ください。
ありがとうございました。
headerとfooterのページ内固定
こんにちはｍスウェルデザインのｗです。
headerとfooterの固定って結構沢山使うことが多いので
いつものやり方を備忘録として残します。
このやり方でページをスクロールしても動かないheaderとfooterが作れます。
1.position: fixed;を使いheaderを固定
スクロールしても絶対位置で固定されたままとなります。（IE6では未対応）
2. top: 0px;left: 0px;に指定。画面の左端に固定します。
絶対位置に固定しても上部に隙間ができてその下から内容が見えてしまったりします。
画面上にピッタリ合わせて隙間ができないように指定します。
See the Pen vLWMNG by swelldesign (@w-swelldesign) on CodePen.
