JIMDO(ジンドゥー)をレスポンシブWebデザインでスマホ~PC用にデザインのカスタマイズをいたします  
03-3957-8018
受付時間10:00~19:00 休日土・日・祝日
 

メディアクエリ

世界中で人気のCMS「Jimdo」にCSS3のMedia Queries/メディア・クエリという技術を使う事によってデバイス(画面の大きさ)に応じたデザインに変わります。

(※画面の大きさとはデバイスのディスプレイの大きさや解像度の事ではなくデバイスのディスプレイ内で表示しているブラウザの表示領域となります)

これまで携帯用サイトを作る場合は、PC サイトの コンテンツとは別に各キャリア(Docomo、Softbank、au etc...)の仕様にあった携帯専用のUI(ユーザーインターフェイス)とIA(情報設計)でコンテンツを作り、UA(ユーザエージェント)の判別などをして振り分けをしたりしていましたが、スマートフォンでは既存のウェブサイトをCSSを使ってフロントエンドだけで対応する事ができます。

 

スマートフォンでPCサイトを閲覧する事はできますが、通常のままですと縮小されとても見難い状態となってしまいます。PCサイトそのものをマルチデバイス対応する事でスマホ専用のサイトを作らなくてもワンソースでさまざまなデバイスに対応した見やすいウェブサイトを構築する事が可能です。

 

iPad のようなタブレットPCの出現でデバイスの大きさもファジーになりました。さまざまなデバイス毎にウェブサイトを用意するとなると管理するのも大変ですが、一つのサイトで多種多様なデバイスの画面の大きさに対応する方法があります。

 

マルチデバイス・サイトの構築の仕方

  • サイドバーやメニューは絞ってシンプルにする
  • リンクだと一目でわかるようにする
  • タッチ操作に最適な行間や余白をとる
  • リキッド(可変幅)でデザインする
  • iPhoneではFlashは表示されない
  • HTML5+CSS3を積極的に活用する

スマートフォンもタブレットPCもクリックではなく指を使った「タップ」がリンクなどを開くためのアクションとなる為、フィンガータッチで行う「タップ操作」のしやすいスタイルを心がましょう。タップを考慮した対策として、リンクエリアを大きくすることがポイントになります。行間・余白を大きめにとったり、ボタン画像などもなるべく大きくするようにしましょう。例:下線のハイパーリンク⇒ボタン形状

CSS3:Media Queriesを使う

ウェブサイトを表示するブラウザのウィンドウサイズは、ディスプレイの大きさや解像度など閲覧環境によってさまざまです。固定したサイズでウェブページを作成してしまうと、ウィンドウの大きさによってスクロールが縦横に発生したりコンテンツが読みづらくなるなどの問題が発生してしまいます。最近ではスマートフォンやタブレットPCからのアクセスも考慮する必要性が出てきていますが、これらのデバイスの種類ごとに合わせた大きさで複数のウェブサイトをそれぞれ用意するのは制作にも管理にも手間がかかってしまい大変ですがCSS3の「Media Query(メディアクエリ)」を使えば、1つのウェブサイトでさまざまなデバイスで表示している解像度やブラウザのウィンドウサイズに応じて適用するスタイルシートを切り替えて、利用者の環境ごとに最適なデザインでページを表示することができます。これからは特定なデバイスだけではなくさまざまなデバイスの種類を考えながらウェブサイトを構築した方が良いでしょう。

 

Media QueriesはCSS3の実装の一環でmedia属性の中に、iPadやiPhoneなどのデバイスの種類や解像度、向きなどの条件文を記述することで、適用する最適化したCSSを分岐させ読み込むことができます。

※Media Queryの規格はW3Cの勧告候補となっており、IE 9、Firefox 3.5以上、Safari、Google Chrome、Operaが対応しています。

ご案内

お知らせ

ビジネスパートナーになりませんか?

「営業」「デザイン」「制作」「講演・講習」「コンサルティング」など得意な分野でコラボレーション。

更新代行サービス

ホームページ担当者のいないご多忙な経営者様に代わってホームページをサポートします。


お問い合わせ

ピクサ・コミュニケーションズ株式会社  詳細

  • 電話:03-3957-8018 Call
  • 営業時間:10:00 - 19:00

Jimdo EVANGELIST

 

JIMDO(ジンドゥー)の1ファンとして皆さまに便利に使って頂けるようにサポートさせて頂いております。

 

※JIMDO Plus では2011年より レスポンシブWebデザイン をつかった JIMDOで提供している「独自レウアウト」のカスタマイズ制作のサービスを行っております。

※このホームページは「JIMDO」と「JIMDO Plus」を使ってつくられています。