navigation>年末年始休業につきまして【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。前回はレスポンシブサイトの制作ワークフローについてディレクターの方がご理解いただく点をご案内いたしました。今回はより具体的なデザインや制作の際に、その担当者の方に最低限知っていただきたい7つのポイントをご案内いたします。制作や更新などの実務業務を行う方が、これらのポイントを理解することで、スムーズにレスポンシブサイト制作更新の業務が可能となります。※この内容は2013年1月現在のレスポンシブサイト制作で基礎的な事項をまとめたものです。日々の技術革新によりアップデートされた技術情報や発展的な内容が欠落する可能性があることをご理解ください。1、フォントサイズに注意するスマートフォン/タブレット/PC全てで同じ文字サイズにしていると、見づらさやレイアウトの乱れが生じてしまいます。端末ごとに適した表示になるよう、javascriptやCSSでフォントサイズを調整する必要があります。スマートフォンやタブレットではやや大きめに設定し、PCではやや小さめのサイズを指定していても読みやすさに問題はないでしょう。2、画像上の文字サイズに注意する上の例でいくと、画像を小さくした時の文字が読みづらいですね。1つの画像を複数の端末で閲覧する場合、画像の拡大や縮小により画像内の文字が見えづらくなるケースがあります。画像内の文字は拡大/縮小をしても見える程度のサイズを保つように注意しましょう。3、リンクやボタンの幅に注意するスマートフォンサイトを制作・更新する際に、テキストリンクをボタン化するなどしてタップのしやすさを確保する必要がありました。タブレット端末にも同様のことが言え、特に余白やサイズに注意し、デザインの時点で実機に画像を表示して検証を行うなどして、高いユーザビリティを実現しましょう。4、画像を利用せずに実現できるものは画像を利用しない通信速度や容量に制限の多いモバイルでの快適さを考えた時に、画像をたくさん使った容量の多いコンテンツよりも、容量を抑えたコンテンツの方が快適に閲覧することができます。ボタンデザインにしても、画像で作ったボタンよりもテキストをベースにして、CSSで装飾したボタンの方が容量を節約することができ、読み込み速度も向上します。下記のようなボタンも、画像ではなくCSS3で実現しています。{position:relative;top:1px;}CSS3で実現するデザインについては、様々なジェネレータがあり、簡単に実装することができます。こちらもご参考ください。色々なCSSジェネレータで出来るあれこれまとめ5、CSSはメディアクエリで切り替えるメディアクエリは、画面幅やアクセスデバイスに応じて読み込むCSSを切り替えるためのテクニックです。CSSファイル内に直接切り替え条件を記述することで実装することができます。768px)とすることで、画面幅が321px以上768px以内、大型スマートフォン~タブレット端末にCSSが適用されるようになります。制作の際にpxなどで要素の縦幅・横幅を指定すると、レイアウトは乱れづらくなりますが、レスポンシブに対応することが難しくなります。レスポンシブの場合は%による指定をすることで端末ごとに自然な幅調整を行うことが可能です。スマートフォンやタブレットは“タッチの操作性”が重要であるため、制作したレスポンシブサイトを実機で確認するとともに、操作性(ボタンのタップのしやすさ、レイアウト崩れなど)に問題ないかの検証を行うことが非常に重要になってきます。▼これらの内容はレスポンシブサイト制作や更新業務での一握りの基礎的事項です。制作や更新業務を進める中で、その他不明な点が発生すると思いますので、その際にはお気軽にaishipのサポートへお問合せいただき解決いただけましたらと思います。御社がレスポンシブサイトの制作・更新をスムーズに実施できるようにサポートさせていただきます。”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。・レスポンシブECサイトがなぜ今選ばれるのか・これまでのECサイトの課題とは何なのか・どのようにすれば解決できるのかといったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。無料パンフレットを請求するABOUTモバイルファーストマーケティングラボとは、スマートフォン/タブレット/PCに対応したレスポンシブECサイトの構築や成功事例の最新情報を発信するブログです。2014年~2015年頃には最も多いインターネット利用端末がモバイルとなり、いよいよインターネットマーケティングにおいてモバイルファースト時代が到来します。』へとパラダイムシフトしています。ファースト)に移行することが必要となります。お手伝いすることです。ご利用いただくまでになりました。ウ』を基にこれからも本当に必要とされるサービスの開発と改善を行い、『モバイルマーケティングでは最も役に立つ、絶対必要な存在』になりたいと思います。多くの商品やサービスをもっと消費者の身近な存在にすることで感動あふれる世の中にしたいと思います。2018.08.24こんにちは。お盆も過ぎ秋がやってくるかな?と思っていたら、また酷暑が舞い戻ってきました。みなさんこんにちは、ロックウェーブの岡本です。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。サイト内検索スマートフォンカテゴリの最新記事2019.02.01スマホからの売上UP!後払い決済を導入すべき理由とは2018.09.14ECサイトには必須?Google提唱のマイクロモーメントの意味と対策2018.06.06インスタグラムからECサイトで直接購入可能に!ショッピング機能「ShopNow」が日本解禁。自社ECサイト運営でASPをオススメする理由モバイルファーストラボ。