スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG
こんにちは、デザイナーのサリーです。 LIGサイトのスマホ版をコーディングしたときの4ヶ月前のメモが良い感じで熟成しましたので、公開したいと思います。 「次コーディングするとき忘れそうだなー」という細かなテクニックをちょこちょこと書いています。THE・メモです。
LIGのデザイナー、サリーさんがスマホサイトのコーディングの際のメモを公開しています。
CSSとhtmlの記述について12個の内容がまとめられています。
始めてスマホサイトを作る人はもちろん、
過去に作ったことがある人でも発見があるのではないでしょうか？
こういう風に自分用の注意点を溜めていくのは
仕事のパフォーマンスを上げるだけでなく、
公開すれば他の人の役にも立つので良いですね。
デザインで使用するソフト何を使ってますか？
PhotoshopやIllustratorの方が多いと思いますが、
海外のデザイン業界ではSketchが大ブームらしいです。
Sketchはモバイル・WEBのUIデザイン専用ソフトです。
ベクターデータなのでデバイスの解像度に左右されずにデザインができます。
しかも、作業中のデザインをiPhoneにリアルタイムで同期できるので作業効率がとても良い！
フリーランスのUIデザイナー山本麻美さんのスライダー、
「Sketchで変わるスマートフォンアプリのデザインワークフロー」が分かりやすかったので
興味のある方はこちらを参照してください。
誰でも簡単！自作フォント作成の「PaintFont」が、あまりにも手軽だったのでフォントを作ってみました
PaintFont.comというフォント作成サービスを最近知りました。 このサービスは、手書きの文字でも、イラストレーターなどで作成した文字でも、無料で手軽にフォントに変換してくれるサービスです。
デフォルトの文字テンプレートをダウンロードして、
そのテンプレートに自分の文字を書き込んでアップロードするだけで
オリジナルのフォントが作成できる「PaintFont」。
WEBサイトの合字（リガチャ）に利用するのも良さそうなサービスですね。
WEBサイトにだってメモできる！ 現代ビジネスマンのお助けツール | For M
「AUN（あうん）」という無料のWEBツールをご存じでしょうか。例えば「このサイト、あの人にも見せたいな」と思ったとき、通常はURLを知らせると思いますが、このツールを使えば簡単に、サイトのスクリーンショットにメモを追加し、画像とコメントで伝えることができるようになります
ビジネスで使えるサービスの記事をご紹介です。
サービスの名前は「AUN」。
サイトをキャプチャした後に付箋をつけられるサービスです。
付箋をつけたいサイトのURLを入力すると付箋を書き込めるようになります。
ベーシック認証がかかっているページでもIDとPASSが分かっていればキャプチャしてくれるのもありがたいです。
書き込んだ後は共有用のURLが発行されて1週間保存されます。
プリントアウトした印刷物に書き込む様にできるし、URLで共有できるので
WEB上でやり取りをする人には非常に役立つのではないでしょうか？
競合サイトの比較で気づきやアクセス解析での改善点など、
意見を出し合いながら最終的にどうするのか等その場で修正個所に書き込めるのが良いですね！
サイトに動きを入れることでユーザーの心揺さぶることが出来ます。
特にインパクトがあるのがパララックス！
パララックスとは動きで遠近を感じることをparallax＝視差(しさ)といいます。
そういうわけで最近パララックスサイトを作る案件がありましたので、
参考にさせてもらった中から5つをご紹介します。
動きが心地良い～。
ゴチャっとせずに楽しい雰囲気が伝わってきます。
石川県金沢市のWeb制作会社さんのサイト。
シンプルでなんだか落ち着きます。
フレグランスミストの紹介サイトです。
その力の入れようは素晴らしく、画面を飛び回る蝶以外にも、慣性スクロールやスクロールバーのデザイン変更など細かなところでこだわりが見えます。
マウスホイールで横に移動するというのは衝撃的でした。
クオリティーの高さがハンパないです。
見せ方がうまくて思わず現物も欲しくなってしまいます。
Photoshopよりきれいに画像を拡大できるサービス「waifu2x」 ｜ ライフハッカー［日本版］
「waifu2x」は、小さな画像をPhotoshopよりもきれいに、かつ自然に拡大してくれるサービスです。プレゼン資料などを作成する状況で、小さな画像しか用意できないないときに便利です。
画像をきれいに拡大してくれるWEBサービス「waifu2x」。
単純に画像を拡大するとボケてしまうのを自然な感じできれいに処理してくれます。
写真は難しいですが、ロゴやイラスト等の画像ではPhotoshopに比べると格段にきれいですね。
資料作りだけでなくサイト制作時にも元データが小さくて困ることがありますが、
小さくて使えないとあきらめる前に一度試してみるのも良いですね。
たった一行のコードで、スマホ時代に合ったメッセージ形式のカスタマーサポートが提供できる「Tayori」 – THE BRIDGE（ザ・ブリッジ）
本媒体でも、特設枠を用意して企業から集まるプレスリリースをご紹介している「PR TIMES」。そんなニュース配信で知られるPR TIMESが、新たに無料カスタマーコミュニケーションツール「Tayori」の提供を開始しました。
手軽に使えそうなスタマーコミュニケーションツール「Tayori」をご紹介。
お問い合わせメールフォーム・FAQを無料で作成できて、
サイトに設置はコードを1行ペーストするだけというお手軽さ。
機能や特徴を簡単にまとめてみました。
どこまで柔軟に対応できるのか実際に使ってみる必要がありますが、
これだけの機能を簡単に設置できるのは非常に魅力的ですね！
5つのステップでブログに使える共有ボタンを作ってくれるサービス「Simple Sharing Buttons Generator」 ｜ ライフハッカー［日本版］
「Simple Sharing Buttons Generator」は5つのステップでブログに使える共有ボタンを作ってくれるサービスです。おおまかな流れとしては、共有ボタンのデザインおよび必要なサービス選ぶだけ。最後に生成されたコードをコピペすれば共有ボタンの完成です。
これは便利かも！
吹き出しなしのSNSボタンを設置したい方には
ポチポチと選んで進むだけでSNSボタンのコードを書き出してくれるサービスです。
クオリティを維持しながら時間短縮できるので便利ですね。
たった1分で素敵なエラーページが作れるサイト「Better Error Pages」 ｜ ライフハッカー［日本版］
「Better Error Pages」はたった1分で素敵なエラーページが作れるサイトです。テンプレートからページのデザインを選び、あとは配色や背景画像を指定するだけ。完成したエラーページはHTML形式でダウンロードすることができます。
サイトの力の入れ具合を判断するのに404ページがありますね。
普段目見かけないページだからこそ、ひと手間加えて印象的なページを作ってる所も少なくありません。
ただ、サイト公開を優先してなかなかそこまで手が回らないという悩みもあります。
そんな404ページを作るWEBサービス「Better Error Pages」を今回はご紹介します。
作り方は非常に簡単です。
以上で「404」「503」「メンテナンス」の3つのページが手に入ります。
ページはアニメーション付きでhtml5で作成されています。
cssとJavaScriptが直書きされているのでそのままサーバにアップしてすぐに使用できます。
日本語表記が無かったり、サイトとの調和を考慮するとそのまま使うのは厳しいかもしれませんが、
利用することで工数を減らしたりできそうです。
こんばんは、人よりコードに関わる時間が多いのが悩みのウニです。
htmlで要素を縦中央に表示させる方法は様々ですが、
可変する高さの中央へ要素を配置する時にCSS3を利用すると本当に便利でした！
今回背景動画を利用したページ作成する案件がありました。
その時てこずったのが子要素を親要素の高さ中央に揃えることでした。
よく使ってる縦中央ぞろえのCSS記述例
.example {
position: relative;
}
.example .aBox {
position: absolute;
top: 50%;
margin-top: -○○px; /* 子要素の高さの半分をマイナスで指定 */
}
親要素の高さが決まっていればこれで行けますが、
今回の背景動画は高さが可変だったのでブラウザの幅によって中央になりません。
そんなわけで、対応を探していると、コリスさんの記事を発見！
引用：[CSS]たった3行のスタイルシートで高さ不明の要素に対して天地中央に配置するテクニック（IE9にも対応）
CSS3のtransform: translateYを利用することで、高さが決まってない親要素の中央に配置できます。
「きた！縦きた！これで勝つる！」
早速やってみると……うまくいかない！
サンプルとソースが違うので確認してみると、
position: absolute;を指定することでうまくいきました。
html
css
.example {
position: relative;
}
.example .aBox {
position: absolute; /* ←ここを変更 */
top: 50%;
-webkit-transform: translateY(-50%); /* Safari */
-ms-transform: translateY(-50%); /* IE 9 */
transform: translateY(-50%);
}
.example videoBox {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: 100%;
height: auto;
}
案件によっては下位のブラウザ対応が必要な時もあると思いますが、
IE9以上での対応ならCSS3を利用すると格段に楽になりますね。