Web Design

モバイルフレンドリーなwebデザインするときにおすすめなツールまとめ


みなさんこんにちは、mayukouです。
今回は、スマホサイトやレスポンシブでスマホサイズのデザインを確認するためにおすすめのツールをご紹介します。
なんとgoogleさんは、モバイル対応の有無で検索順位が影響すると、発表されたようです。

Google、モバイルファーストインデックスの導入予定を正式発表。スマホ向けページを検索の評価対象に。SEOへの影響は?


対応は2〜3ヶ月先になるようなので、今のうちにモバイル対応をバッチリしておきましょう(^_^)

スポンサードリンク

モバイルフレンドリーとは?

ウェブサイトをモバイル(スマホ)ように表示を最適化し、
ユーザーが快適にモバイルwebサイトを閲覧できるようにすることです。
SEOラボより

今では、スマホ最適化のレスポンシブwebデザインや
スマホ用にウェブサイトを別に作るなど、様々な対応がとられています。

スマホ表示確認におすすめのツール

Blisk



使用するのに時間制限がありますが、サーバーにアップしないローカルサイトも確認できるのでオススメです。無料ですが、プレミアム版は月額9.99ドルほどで無制限に使えます。
確認にあまり時間をかけない場合だと、無料でも使えますが、
じっくりHTMLの構造を見たいときは要注意です。
同一画面上で、スマホ画面とPC画面を確認できます。
iPhone4〜iphone7 plusまで確認することができます。
あとは、NokiaやSAMSUNGGALAXYS3〜S6など多様な機種を確認できます。

Blisk – こちらからダウンロードできます

※ソフトを立ち上げると、ポップアップで「機密情報を〜許可していいですか?」とでますが、念のため「拒否」を選んでいたほうがいいでしょう。

iOS simulator

Xcode というアプリ制作ツールに入っている、iPhone をシミュレーションできるツール。
さまざまなiOSのバージョンを確認することができます。
X code

Chromeユーザーには「MobileLayouter」



Mobile Layouterは、Chrome のアドオンです。
iPhoneやタブレットの確認ができます。
Chromeにアドオンで「Mobile Layouter」で検索して追加すると利用できます。無料です。

確認できる機種

iPhone5s
iPad mini
iPad
Nexus4
Nexus7
Nexus10

最後に

いかがでしたか?スマホサイトを作る際に、参考になれば幸いです。ぜひチェックされて下さい。

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. Web Design

    【有料記事】スキルアップしよう。デザイン力が育つ方法とは。

    みなさんこんにちは、mayukouです。デザイナー5年目の私が、仕事…

  2. illustration

    photoshopでモコモコの線を描くには?

    こんにちは。mayukouです。今回は、photoshopでモ…

  3. photoshopでカンプ作成

    Photoshop

    photoshop CCでデザインカンプを作成。メリットとデメリット

    みなさんこんにちは、mayukouです。最近、webデザインのカンプ…

  4. jQuery

    横幅いっぱいに表示可能なスライダーのjQueryプラグイン 「Skippr」が便利!

    みなさんこんにちは。11月に入り寒くなりましたね。今年もあと2ヶ月と…

  5. Web Design

    WordPressブログを同じサーバーに複数作る方法

    これ、実は知らなかったのですが、とっても簡単でした。そんなことも知…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. ブログ

    明けましておめでとうございます。今年の抱負
  2. jQuery

    ホームページに必須!?jQueryでトップへ戻るボタンの作り方
  3. Web Design

    書評「だからそのデザインはダメなんだ」で適切なUIデザインを考える
  4. 日記

    wordpressでコーギーブログ始めました♫
  5. ブログリニューアル

    wordpress

    ブログリニューアルしました。そのときやったことなど。
PAGE TOP