1. ホーム /
  2. コネタ /
  3. WEB制作

WEB制作

WEB制作

Webデザインのスマホ実機検証に挑戦!! iPhone & Macは超簡単、Androidは難しい

Webデザインをやっているお友達のみんな! スマホサイトのデザイン検証ってサクサクやれているかな?

きっと、面倒臭いからChromeのF12(Windowsの場合)押してデベロッパーツールとか使ってるよね。実際、それで大体の場合は事足りるけど、たまにPCのシミュレートとスマホ実機ではデザインの解釈が違う時があって、本番環境に上げて公開してから、後で細かくみたら変な隙間ができていて、焦った経験も1度や2度あるんじゃないかな?

使ってるPCとかスマホの種類とかによるけど、実はiPhone & Macの組み合わせだと、ほぼUSBケーブルで繋ぐだけで、あっさりPCサイトみたいにデベロッパーツールで検証することができるんだ。

できる気はしたけど、つい最近まで試したことがなかったもんだから、メモがてらに紹介するよ。メモ書き程度だから、詳細な手順を知りたい人は、もっと詳しい人のサイトでも調べてね。

iPhone & Macの場合

これは驚くほど超簡単。機種とかバージョンにもよるだろうけど、ここ数年の機種なら大体できるはず。

基本、iPhoneとMacをUSBケーブルで繋いで、MacのSafariの開発メニューからデベロッパーツールを表示するだけ。それでiPoneのSafariで開いているページを検証できるようなメニューが出るから、あとはいつもデベロッパーツールでいじっている感じで検証できる。

簡単に文字とかもリアルタイムに差し替えできるから、こういうときだけ、Appleのパッケージングはすげえなと思うよ。普段はカスタマイズしづらくてガラケーなんだけどね、iPhomeって。多分、iPadもできるんじゃないかな。

Androidの場合

Androidはメーカーというか端末ごとにカスタマイズされていて、検証とか一般人が使わない部分はダークゾーンになっている場合がある。

古いものなど機種によっては、ある部分を7回タップするとか、Huaweiの端末は隠しコマンドみたいな電話番号を打ち込むとかしないとならない。他のエンジニアとかのページでは超簡単とか言ってる場合があるが、超難しい場合もあるから、どうしてもやる必要がなければ諦めた方がコスパいい場合もあると思うよ。

うまくいく機種であれば、WindowsやMacのChromeから、AndoidスマホのChromeで表示しているページを検証できる。これもPC側のChromeに隠しコマンドみたいなURLを打ち込む必要があるから、ちょっとややこしいな。機種によっては挙動がおかしかったりするし。

Huaweiの端末とかだと、メーカーのHisuiteとかいう専用のファイラーアプリをインストールしないと使えない模様。PC側のChromeがスマホとやりとりするのに、機種ごとのドライバーがいるみたいなんだ。オプション項目とかもちょっとややこしいね。

Webデザイナーの場合はガチの実機検証はそれほど必要ないかもしれないけど、いざという時にそういう方法もあるんだと知っているのは心強いよね。

WEB制作

実はWordPressは子テーマ化するメリットはあまりない

WordPressの初心者向けの入門サイトでは、何とかの一つ覚えの如く「何はともかく子テーマを設定しろ」と言われて、それなりにWordpressを使っている人でも、何とな?く子テーマ化して使っている人が多いように思う。

しかし、個人レベルで運用するにあたっては、子テーマ化ってそんなに意味あるんか?? と個人的には思う。いや、そう思っている人は一定数いて、実際に子テーマ化するデメリットもある。

いくつか子テーマ化するデメリットを挙げて行こう。

設定する手間がある

WordPressの初期設定は色々あって最初は忙しいはずだが、子テーマを設定するのも意外と苦労する。

最初から子テーマ用も設定が用意されているテーマならともかく、自分で作るともっと手間がかかるし、テーマによっては子テーマ化すると後々、不都合が出る場合もあるという。

人によっては意外に使うことがない

子テーマは主にデザイン変更を親になるテーマに直接手を加えることなく追加するために使う。

しかし、Wordpressのカスタマイズ画面には「追加CSS」という、リアルタイムでプレビューできて、便利で手軽にデザイン変更できる機能がある。

初心者を自覚している人なら、これで初心者が手を出せる程度のデザインは全部できると思うので、わざわざ子テーマをいじる必要がない。

処理速度が低下する

おそらくコンマ何秒のレベルではあるが、子テーマという設定を被せることにより、サイトを表示する速度が低下する。

コンマ何秒というと「大したことないじゃん」と初心者は思うかもしれないが、実は結構重要で、ほんの少しサイトの表示が遅くなっただけで、Googleの検索結果の表示が下の方になったり、ページを見る人が離脱する可能性が高まる。

まとめ　大抵の場合、子テーマは必要ないかも

普通の初心者にとって、ほぼ必要ないのではと思う。

企業とかでエンジニアを抱えてWordpressで大規模なサイトを運用しているようなケースを除いて、一般個人の初心者が子テーマを使うメリットはほぼないんじゃないかと思う。

function.phpをいじりまくって、なおかつ頻繁に更新するテーマ（そんなの使いたくない）を使っている初心者には子テーマは便利なのかもしれないが、個人的には必要ないと思っている。

WEB制作

【テーブルレイアウト】HTMLメルマガ作成で実践したこと備忘録

企業にWebデザイナーとして勤務すると、稀に担当になってしまう場合があるHTMLメルマガの制作。

HTML5やCSS3、JSなんかも余裕!!というイケてる貴方もタジタジになること間違いなしHTMLメルマガ。なぜならHTML5やCSS3、JSなんかできても意味ないので、テーブルレイアウト、つまり1995年頃のインターネットを思い出す必要がある。

え? 1995年に生まれてなかったって? そんな人もいるかもしれませんね。

2019年時点の標準的なHTMLメルマガ

レスポンシブやゲームアプリが動いたりするWebブラウザと違い、同じ「HTML」であってもHTMLメルマガはOutlookやGmailなど主要なメールアプリの仕様がPCもスマホもヤバイので、通常のブラウザ用のHTMLとは違うノウハウが必要。

テーブルレイアウト

これは基本中の基本。世の中は広いのでテーブルレイアウトじゃないHTMLメールも存在するかもしれないが、一般的な企業が配信しているHTMLメルマガの多くは、テーブルレイアウトで作られている。

PCもSPも同一レイアウト

基本的にPCとSPは同じレイアウトのものが表示される。レスポンシブ対応ができたりできなかったりするので、一般的には同じものを表示される。そのため、幅600pxくらいで作り、どっちで表示されてもそこそこ良い感じに見えるようにする。

CSS指定

CSSのスタイル指定は基本的にインラインで書く。メーラーによって使えないCSSもあるので注意。

できるだけシンプルに作る

上記の条件があるため、Webページみたいな複雑なレイアウトは挑戦すると作成や検証で地獄を見るのでやらない方が良い。

画像は絶対パス

画像はメールとは別にFTPで上げておき、絶対パスで読み込む。作成中はローカルで相対パス、上げてから絶対パスに置換すると良いだろう。

サンプルソース

本文や画像はtable→tr→td内に記述する。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Type"
    content="text/html; charset=iso-2022-jp">
</head>
<body bgcolor="#ffffff" text="#333333" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td align="center" width="600" height="650"><a href="#" target="_blank"><img src="絶対パスでxxx.jpg" width="600" height="650" style="display:block" alt="画像"></a></td>
  </tr>
</table>

</body>
</html>

Outlookでの画像の隙間発生

特に厄介なのがOutlookだ。こいつの描画エンジンはWordなので、HTMLの構造的に正しくても、変な表示崩れや、画像に隙間ができたりする。

個人的にやっかいなのが画像。何も考えないで入れると、スライス画像などで隙間ができるとまずい場合でも容赦なく隙間ができる。長年の研究によると、下記の設定をしておけばutlookやiPhone、Gmailな主要なメーラーで大体、意図通りに表示される。

画像を使いたいからHTMLメールを作るのだろうから、大体のHTMLメルマガは画像中心になると思うけども、根本的に長いHTMLメールはメーラーや端末によって省略されたり、Outlookで意味不明の1px程度の隙間ができたりする。

一つのtableは適当に2000pxくらいで分割して、下にtableを複製していった方が、長年の研究によると、うまくケースが多い。

そもそも、MAX6000pxくらいにしないと誰もみないし、長くなると原因不明の表示崩れが起きやすいので、短めに、内容もシンプルに作るのが良いと思う。