レスポンシブデザインを始める前に知っておきたいこと。会社概要お問合せプライバシーポリシーホームページ制作HOMEホームページ制作レスポンシブデザインを始める前に知っておきたいこと。レスポンシブデザインを始める前に知っておきたいこと。2017年5月2日netbwave今回は、初心者向けのレスポンシブデザインのホームページ制作の考え方です。レスポンシブデザインのホームページって、作り始めの頃は意外と手間が掛るモノです。レスポンシブデザインでホームページを作る時などは、かなり苦労するでしょう。複数のホームページをレスポンシブデザインで作ると、作業の流れも理解して制作効率もアップします。するとあまり効率の良い作り方をしていないかもしれません。スマートフォン画面から作り始めるレスポンシブデザインの場合、PC画面とスマホ画面の違いは、何処でしょうか?PC用は作り込まれた、完璧な画面。対してスマホは省略された簡素な画面。言ったところでしょうか。PC画面は各種の装飾を施して、綺麗なページに仕上げます。そこからスマホ画面を作り上げると言う事は、例えば、綺麗に飾り付けられたデコレーションケーキの飾りを全て取り除く作業だと思えば、解りやすいかと思います。これって、結構手間が掛ると思いませんか?一度作ったモノから余計な装飾を取り外す。綺麗に......スタイルシートの指定したセレクタそのものが不要であれば、簡単に削除出来ますが、そうでない場合は、意外と手間が掛ります。常に、スマートフォンでの画面確認をしながら作業を進める事は、結構手間が掛りますよね。仕事なので、当たり前だと言ってしまえばそれまでですが、作業効率と言う面からは、疑問ですよね。これが逆だとどうでしょうか。最初はシンプルなケーキを作って、そのシンプルなケーキをコピーして、そのコピーにデコレーションを施して行く。最初はスマホにつきっきりですが、スマートフォン画面が出来れば、後はスマートフォンでの確認はいりません。こちらの作業の方が、簡単で楽だと思いませんか?もちろん、ブレイクポイント※1の設定次第では、複数の画面サイズでの確認は必要になりますが。ベースとなるスタイルシートにプロパティを足すあるいは変更するだけなので、比較的に簡単な作業で終わります。作業時のポイントになるのは、まず使用が予想されるタグを可能な限り洗い出します。デザインデータがある場合は、デザインデータに沿った画面を作る事が優先されますが、デザインデータに無い部分。ブログ本文などで、ホームページ制作後に追加される部分も考慮して、一般的な記事に含まれるであろうタグがどのように表示されるかを確認しておく必要があります。言っても、それほど多くはありません。大体基本的なタグを押さえておけばよいので、私が作業をする時は以下のタグで大体の表示チェックをします。テキスト関連H1~H6、P、strong(b)、aリスト関連ul、ol、dlブロック(範囲指定)関連div、spanイメージ関連imgフォーム関連input、button表レイアウト関連tableざっとこんなところでしょうか。その他デザイン上必要なタグがあれば、それらを追加して、表示の確認をします。タグについては、テンプレート化しておけば、他でも使えるので便利です。スマホの画面が出来上がれば後は、気のすむまでPC用のスタイルシートをいじり倒せば、よいのです。レスポンシブデザインにつてい、多くのサイトで制作方法が書かれています。言った作業効率について言及しているサイトはあまりありません。制作方法やテクニックも重要ですが、初心者やこれから勉強してみようと思っている人には、こうした【何故そうしなければならないのか】というところまで掘り下げた内容が必要な気がしたので、今回は技術的な要素を排除して、概論的な内容を書いてみました。最近はWordPress(ワードプレス)などのCMSが普及しているので、ゼロベースで最初からレスポンシブデザインのホームページを制作される人は少ないと思います。他のテーマをベースにして改造した方が作業効率は良いですからね。テーマ改造の場合でも、やはりスマホ画面から作業した方が速い場合があるので、私はまずスマホ画面の改造からやります。WordPressの場合はスマートフォン画面での修正は基本的には無い場合が多いです。あってもリスト系のタグと、DIVタグぐらいでしょうか。イメージタグも、きっちり調整されて表示されるので、そう言った意味では、手間いらずで助かります。言って、タグの確認を後回しにしてしまうと、後の修正(調整)で結構泣きが入る事があります。デザインが出来上がっている場合は、特に面倒な事があるので、出来ればスマホ画面から制作を始めた方がよいでしょう。ヘッダー廻りやグローバルナビゲーションなどは、改造ベースのテーマによってはかなり手を焼く事があるので、先に確認しておいた方がいいでしょう。趣味でホームページを作っていても、作業効率がいいに越した事は無いので、今回の話はそう言った人の手助けになれば、よいです。レスポンシブデザインに限った事ではありませんが、作業効率を高める為には、どうすれば良いのかと言う事を常に考えておく事が大事です。作業効率がいいと言う事は制作に余裕が生まれるので、綺麗なホームページを作る事にも繋がります。現実問題として、端末の画面に合わせたレスポンシブデザインの場合、ブレイクポイントを何処に設けるかで作業効率がかなり変わります。大雑把にPCとスマホのみの2種類か、タブレットや大型スマホなどに合わせると、3~4種類の作りこみが必要になるので、意外と大変です。その大変さを緩和する為にも、作業効率を上げる事は、重要になってきます。ブレイクポイント※1レスポンシブデザインで最も重要な、画面を切り替える横幅サイズ。一般的にはスマートフォンとタブレットで2つぐらいを設定している場合が多いです。次の記事httpsにする事でSEOが上がる?ホームページ制作会社の本音。ホームページサポート横浜市中区を拠点に、全国の中小企業を対象に効果的なホームページ制作と運営サポートを提供しています。神奈川県横浜市に限らず全国対応で柔軟にサポートいたします。CONTACT無料相談・お見積もりをぜひご利用ください。私たちがあなたのビジネスを成功に導くための最適な提案をいたします。定休日.日祝日ホームページサポートは、神奈川県横浜市のホームページ制作会社です。