ホームページを作ろう
responsive web design
ホームページのアクセス件数を増やす方法として、知人やあらかじめ登録している人にメールで通知することもあるが、検索サービスを利用して内容に感心のある人から見られることでもアクセス件数が大幅に増えることもある。
多くの人がインターネットを検索して容易に情報を得られる時代になり、時間や距離を超えて情報が伝わるようになった。
検索エンジンプログラムでインターネットから情報を集めて蓄積し検索サービスを提供している代表的なものとしてGoogle、Yahoo、bingがある。サービスが利用され、広告を表示することによって利益を得ており、さらに進んで大量の検索キーワードも有用となった。
検索結果の表示が上位程よく閲覧されることから、webデザイナーはサイトが検索上位になるよう苦慮することになった。
予備知識
-
インターネットシェア
・世界の検索エンジンシェア(2019年9月)(出典:statcounter)
・世界のブラウザシェア(出典:statcounter)
・プラットフォーム(出典:statcounter)
検索エンジンはGoogleが圧倒的シェアを占め、検索するブラウザはChrome(ChromeはGoogleが提供するブラウザ)、プラットフォーム別ではMobileがパソコンを抜き去っている。
Mobileはタブレットは別にしているのでスマホが多いといえよう。
-
SEO
SEOとはSearch Engine Optimization の略で、「検索エンジン最適化」を意味する。
簡単に言えば、検索した結果が上位に表示されるようにすること。
-
Google Search Console
Googleが提供しているサイトを測定するツール。
ツールやレポートを使うことで、サイトの検索トラフィックや掲載順位を測定できるほか、問題を修正し、Google 検索結果でのサイトの注目度を高めることができる。
-
メディアクエリ(Media Queries)
画面環境に応じてスタイルを切り替える機能
メディアクエリとviewportの使い方について
-
Devtools (developer tools)
ブラウザが提供しているWebアプリケーション開発のツール。
Devtoolsと呼んでいる。
レスポンシブデザイン
webサイトを多くの人に閲覧されるには、圧倒的シェアを誇るGoogleに登録し、検索結果の上位に表示されるようにしたいがGoogleは基準を設けている。
検索結果が目的に沿った内容であることは当然だが、パソコンだけでなく、モバイルデバイスでも見やすいことをGoogleが推奨している。
以前はパソコンがメインだったためスマホの縦長画面をスワイプ(指でなぞって)して拡大したりしていたが、いまやメジャーであるモバイルデバイスで見やすいモバイルフレンドリーをGoogleが評価するようになったため、webページをデザインする際、どちらでも見やすいように考慮しなければならなくなった。
パソコン画面は横長で、スマホは画面幅のより小さい縦長で見る人が多いのが問題。
次々と仕様の異なるモバイルデバイスが市場に出回る時代に、個別にデザインするのも大変なので、Googleがurl と htmlを分けなくても、画面サイズに応じて（「レスポンシブ(Responsive)」に）表示を変えることを推奨している。
参考)【2019最新】スマホ・タブレットの解像度一覧表（画面サイズの割合）
*以下、ここではChromeの例で説明する
作例.1
レスポンシブなデザインの作例をみてみよう。
スマホの場合が厄介で、種類が多いため画面のサイズ全てに対処することは大変なので、余裕をもたせて適当なところで妥協する。
パソコン画面
iPhone6 画面(before)
iPhone6でパソコンのデザインをそのまま表示し、画面に収まるように指で縮小した。
このままではGoogle 検査ではエラーになる。
このページはモバイル フレンドリーではありません
・テキストが小さすぎて読めません
・クリック可能な要素同士が近すぎます
モバイルで見えにくいと評価され、検索結果で下位に表示されかねない。
CSSにメディアクエリ(Media Queries:画面環境に応じてスタイルを切り替える)を追加しモバイルでもみやすくする。
< head>に<meta name="viewport" content="width=device-width,initial-scale=1.0"> を追加する。
参照) : viewportとはなにか？
画面幅が 320px～414pxの場合、最上部のラベル幅を広げ、文字を大きくする。
以下のメディアクエリをCSSに追加。
@media screen and (min-width: 320px) and (max-width: 414px) {
#top_ul #li1 , #top_ul #li2 {
font-size:1.2rem;
width:14%;
} }
他も必要に応じてfont-sizeや、list表示の高さなども変える。
iPhone6 画面(after)
メディアクエリを適用した。
Google Search Console
Google Search ConsoleでURL検査。
・URLはGoogleに登録されている。
・モバイルフレンドリー(スマホなどで閲覧した際に、ウェブサイトが最適化されている)に対応しているかの検査に合格。
作例.2
種類の多いモバイルデバイスでの検証は難しいため、ChromeのDevtools(developer tools)のモバイルシュミレーターを使って検証しCSSを変更する例を紹介。
パソコン画面の右クリックで「検証」を選ぶ。
Devtools (developer tools)画面。
上のバーからアイコン 
(Toggle device toolbar)で パソコン表示<-->モバイルシュミレーター表示を切り替える。
左上のデバイスリストでシュミレーターデバイスを選ぶ。
図ではiPhone6/7/8 375 x 667 のシュミレーターを選んだ。
表示が乱れている。画像も小さい。
htmlの<head>に<meta name="viewport" content="width=device-width,initial-scale=1.0"> を追加。
CSSに以下のメディアクエリを追加。
画面の大きさが414pxまではここの記述が有効になる。
@media screen and (max-width: 414px)
{
h1 {
color:red;
font-size:1rem;
}
#ul_index li {
font-size:1rem;
}
#div_frame1 {
width:40%;
}
}
html , CSS変更後の表示
他のデバイスでも確認
作例.2の表示画面で、右クリックし「ページのソースを表示」しhtmlとCSSはが確認できる。
作例.2
作例.3
パソコン画面でbox① , box② , box③の3つのフレームがあって、中央の box② がメインで左右がメニューバーなどの場合。
モバイルデバイスではbox② , box① , box③ とメインのフレームを最初に持ってきたい。
このような場合のFlexboxの作例。
3つのフレームを含む親要素を作り
display: flex;を定義する。3つの子要素の表示の順番をorderタグで指定する。
@media screen and (max-width: 414px) {
#box0 {
display:flex;
flex-direction : column ;
justify-content:center;
}
#box1 {
order:2;
}
#box2 {
order:1;
}
#box3 {
order:3;
}
} *タグは抜粋
FlexboxはCSS3の機能で、親要素の中に含まれる子要素を思いのままに配置できる。CSS Flexboxの使い方
これが使えるようになるまではfloatプロパテーを使って大変苦労をしていた。但し比較的新しい機能なので古いブラウザの場合は考慮が必要。
必要ならば 作例.3 を表示させて、右クリックでソース・CSSの表示と検証でシュミレーションして頂きたい。 作例.3
終わりに
以前はパソコン主流で画面も横長で大きいことから、様々な手法を駆使して注目されることを考えていたが、多様なプラットフォームに対処するためサイトのデザイン自体はシンプルになっていくが、パーツとして使われる画像や動画などがより質の高いものになると思う。
| Total | Today | Yesterday |