Webデザイナーでブロガーな個人事業主”リンゴ”が、【個人事業主・起業家のブログとHPでの発信&集客】【Apple中心にPC&ガジェット】【ワークスタイル】の情報を発信するブログ

当ブログについて

筆者について

リンゴプロフィール

個人事業主・起業家の発信〜集客を月3万円でアシスト
Webデザイナーでブロガーな個人事業主 リンゴ

リンゴをSNSでフォローするならこちら


Mac(Mac OS/OS X)

-

Macに関する話題を届けます。

主に、Mac本体や周辺機器やアプリのレビュー・僕が気になったMac関連のニュースについて。

MacBookProで仕事をするようになり、ワークスタイルが大きく変わりました。

今僕が、場所や時間にとらわれずにリモートワーカーとして、仕事をすることが出来るのもMacに切り替えたお陰です。

MacBookProRetina 15inch(2015)とMacBook 12inch(2017)を使用中。

この記事は「Mac(Mac OS/OS X)」カテゴリーの記事

2015/12/22

Mac(Mac OS/OS X)

Post Title

【Mac】スマホサイトの表示・動作のチェックに使える『iOSシミュレーター』



Webデザイナー”Ringo”おはようございます。
美容サロンと一緒に働くWebデザイナー、Re:birth DesignのRingo(@rebirth_design)です!毎朝8時に、このブログをアップしています。

今日はWebサイト(特にスマホサイト)を制作する上で、個人的にとても便利だと思っているMacのソフト(アプリ)の話をしたいと思います!

RebirthDesignブログ見出し画像

ここ数年のサイト制作で「スマホ最適化」は欠かせないものの一つとなりましたね。特に若い女性向けのサイトやサービスでは、スマホがPCの利用率を軽く上回るほどです。

我がRe:birth Designでもやはり「サイトのスマホ最適化」のご要望は頂きますし、ターゲットによってはもはや必須ですよね。

そんなスマホ対応サイトは、PC上で制作することに変わりはないのですが、動作チェックはスマホ実機で行う必要が出てきます。

ただ、これが結構面倒なんです。

PC上で作業をしていてスマホを手に取ってチェックというのが、どう苦手です。

そんなときに活躍してくれるツールが、今回紹介する『iOSシミュレーター』です。

『iOSシミュレーター』とは?

Appleが出している開発者用のツール『xcode』内に含まれているiOSのシミューレションができるMac専用のソフト(アプリ)。

iPhoneやiPadをはじめ、Apple TVやAppleWATCHをMac上でシミュレートすることができます。

アプリ開発での動作チェックが主となっているのかと思っていたのですが、シミュレーター内でSafariが使えるので、サイトの動作チェックにばっちり使えます。

Apple公式のソフトなので、各端末での表示の再現度はかなり良いものかと思います。以前に使っていたGoogleChromeのデベロッパーツールよりも実機と近い感覚だったので、Macでサイト制作をしている方には絶対おすすめです!

iossimulator05

↑こんな感じで若干、表示が違って見えました。

…もしかしてCSSの書き方が良くないのしょうか?

ダウンロードは無料。AppStoreから

『iOSシミュレーター』を使うためにまずは、MacのAppStoreを起動して『xcode』と検索すると出てくるアプリをダウンロード、インストールしましょう。

『xcode』ダウンロードページ→【https://itunes.apple.com/jp/app/xcode/id497799835?mt=12

iossimulator02

インストールできたら『xcode』を起動して、デスクトップ上部のメニューバー内『xcode』→『Open Developer Tool』→『Simulator』でiOSシミュレーターが起動します。

iossimulator03

あとはSafariを開いて、サイトのURLを開けばOKです。

クリックで操作するため、実機に比べるとスクロール等の操作が若干やりにくい気もしますが、ローカルのページも開けるので、制作を進めながら都度チェックもできるので本当に便利です!

Dockに追加しておけば楽に起動できる

『iOSシミュレーター』を起動した状態でDockのアイコンを右クリック、『オプション』→『Dockに追加』をしておけば次から起動するときは『xcode』を起動する手間がなくなるので、使いたいときにサッと起動できちゃいます。さらに便利に。

iossimulator04

 

ということで今日はスマホサイトの動作チェックにもピッタリなMacの便利ツール『iOSシミュレーター』の紹介でした。

これまでテスト用のサーバーにアップしてスマホ実機で確認、っていうのを繰り返しおこなっていたのがあり得なく思える程、チェックが楽になったので、無料で『xcode』をダウンロードして是非使ってみてください!

ではまた。


  • オススメ記事&スポンサーリンク


この記事が面白い・役に立ったと思ったら、今すぐSNSでシェアして下さい!記事を書くモチベーションが上がります!
  • 起業家・個人事業主の発信×集客はブログを使うべき理由は…↓

  • スポンサーリンク

こんな記事にも興味がありませんか?

リンゴから記事を読んでくれたアナタに

ブログや仕事、PCの事で困ったことはLINEで今スグ、Ringoに相談してください!

RingoのLINE@に登録して、いつでもどこでも何でも即相談

WebデザイナーRingoのLINE@アカウントを開設しました。

LINEから、友人や家族にメッセージを送るのと同じくらい気軽に相談をして頂けます!

これまでに「お店でブログを始めたいけど、どうすればいいの?」や「新しくMacBookを買おうと思うけど、このスペックで失敗しないかな?」等の相談を頂いています。

友だち50人(登録者50人)になるまでは、相談は無料で乗ります!(あと41人)

今スグに「友だち追加」ボタンを押して登録&相談をして下さい!

RingoのLINE@に登録

この記事を書いたのは「リンゴ」

筆者「リンゴ」について

リンゴプロフィール

リンゴをSNSでフォローするならこちら

個人事業主・起業家の発信〜集客を月3万円でアシスト
Webデザイナーでブロガーな個人事業主 リンゴ

Webデザイナーでブロガーな個人事業主のリンゴ(Ringo)です。

当ブログ『リンゴノマド』では【HPとブログの運営&集客】【PC&ガジェット】【ワークスタイル】【制作】に関する情報を毎日発信。

ブログを通してWebやガジェット等、デジタル関連の物が持っているワクワク感を伝えていきます!

仕事は【個人事業主・起業家のブログ発信×集客サポート】を中心に、【ブログ記事の執筆】【Webサイトや印刷物等のデザイン】をしています。

依頼・相談は問い合わせページ、もしくは各SNSにてお願いします。(返事が一番早いのでLINEがオススメです。写真下の『@』アイコンからメッセージ下さい。)

他にも、気になったことがあれば「ブログみた」と気軽に声をかけてください。

詳細プロフィールを見る

リンゴに仕事を依頼・相談する

  • 起業家・個人事業主の発信&集客は、ブログを使うべき理由は…↓

筆者について

リンゴプロフィール

個人事業主・起業家の発信〜集客を月3万円でアシスト
Webデザイナーでブロガーな個人事業主 リンゴ

リンゴをSNSでフォローするならこちら

ブログ全体の新着記事

Apple好きへ

iPadは量販店で買うべき!僕がAppleオンラインストアを使わ…

Apple好きへ

【2018年冬】MacBook vs MacBook Air。選…

Apple好きへ

【随時更新】Macで遊んだけど、いまいちオススメしたいと思わなか…

Apple好きへ

Apple創設者スティーブ・ジョブズの人生を漫画で知ろう!おすす…

Apple好きへ

Apple純正キーボード『Magic Keyboard』 テンキ…

ブログ運営・集客したい人へ

ブログやHPで使える!6千万枚以上の画像素材を販売する『PxBe…

新着投稿をもっと見る

Mac(Mac OS/OS X)の新着記事

Apple好きへ

【2018年冬】MacBook vs MacBook Air。選…

Apple好きへ

【随時更新】Macで遊んだけど、いまいちオススメしたいと思わなか…

Apple好きへ

Apple純正キーボード『Magic Keyboard』 テンキ…

Apple好きへ

【レビュー】Webデザイナー×ブロガーが、仕事用メインマシンとし…

Apple好きへ

【作業効率UP】Macに外部ディスプレイを接続して2画面化(マル…

Apple好きへ

【検証】『27インチ iMac Retina 5K(2017)』…

「Mac(Mac OS/OS X)」の一覧を見る

ブログ全体の人気記事

Apple好きへ

【追記有】Apple PencilとiPad Proの接続が出来…

Apple好きへ

【随時更新】Macで遊べるオススメのゲームをまとめて紹介!(iM…

楽しく生活したい人へ

MacはWindowsに比べて、ゲームに向いていない!?その通り…

Apple好きへ

iPadでもIllustratorを使いたい!そんなあなたにはコ…

Apple好きへ

【検証】MacBookをクラムシェルで使うと、本当にバッテリー劣…

楽しく仕事したい人へ

【追記】ニコちゃんマークこと「スマイリーフェイス」。皆よく使って…


▲最上部へ