今まで２、３カラムのレイアウトを使っていたのですが、思い切って１カラムのデザインにブログを変更しました。
最近気になっているブロガーサイト、Fashion Squadを参考に日本語で使える＆画像を使わず、CSSのみでデザインしています。
デザイン周りの設定をCSS3でしているので古いブラウザーでは少し見た目がおぼつかない状態ですが、IE9、Chrome、FireFoxの最新版で問題なく閲覧できます。
ウィジェットをすべてページ下部に配置。その他、カテゴリーやアーカイブの表示は別途フッターにリスト表示を追加する予定です。（一応対応済）
未だ検証中ですが、時期を見計らってダウンロードできるようにしたいと思っているので要望、気になるところなどあればコメントいただけると幸いです。
よりいいものにするため、先行して５名様にテンプレートを提供します。
お問い合わせより連絡先（メアド）と用途、ブログの内容など教えていただければ、都度検討し返事いたします。締め切りはお問い合わせの数次第でおよそ一週間ぐらいにて。
月: 2011年11月
タブレットやスマートフォン向けサイトを画面サイズに合わせてviewportを変える際のTips
タブレットやスマートフォン向けのサイトを作っているときにぶち当たる問題が端末の画面に対するデザインのサイズ設定。
デザインもリキッドレイアウトをメインにしつつブロック要素で構成していたりすると画面を回転させたとき、幅が可変にならず右に余白が。。。。といったことがあったのでその対処法も少しばかり載せておく。
一般的に画面が回転するとそれに応じてブラウザの縦、横幅のサイズも入れ替わるはずなのだが、一部には入れ替わらないものがあり、そのときの対処を考えるのに無駄に時間がかかったりしてしまう。
自分がいろいろ探して見た結果、回転したときの角度を取得してそれに応じて画面幅をviewportにJavaScriptで振り分ける方法が比較的簡単に適応できる方法だとわかりました。
JavaScriptで window.orientation を使うと角度が取得できる。
自分が検証に使った端末は横長のときに0度or180度、
縦長のとき90度、-90度と表示されていたので、
縦横が入れ替わらない場合の設定は（jQuery使用）
var orientation = window.orientation;
//角度の取得if((orientation == 0)||(orientation == 180)){
//横長のときの設定
var hscale = $(window).width();
var wscale = $(window).height();
}else{
//縦長のときの設定
var wscale = $(window).width();
var hscale = $(window).height();
}
var viewport = $(‘meta[name=”viewport”]’);
$(全体幅を指定している要素).css({width:wscale});
viewport.attr(‘content’, ‘width=’+wscale+’, initial-scale=1, maximum-scale=1′);
といった感じで設定。
よりシームレスにするには画面幅に応じていくつかレイアウトデザイン(max-width?など)を定めた上で行うと効果的。
未だ少し理解できていないAndroid OS2.Xと3.Xのブラウザのviewport周りの挙動についてわかり次第またかきます。
Macで年賀状、はがきを印刷するなら宛名職人
Nenga. 皆と違う年賀状 を運営している身ではありますが、新卒のときに買ったプリンタについていた宛名職人がLionで使えなくなってしまったので今回新たに「宛名職人 Ver.18」を購入。
決めてしまった理由は・・・
・パソコンのアドレス帳と住所録との連携が楽々なところ。
・年賀状や暑中見舞いのみならずさまざまなテンプレートが用意されている（使わないけど・・・）
・名刺やラベルにも対応しているところ。
・オンラインでテンプレートを追加できるところ。
など、CD-ROMが付属した年賀状ムックを買うよりもかなり便利で充実した機能をつかうことができるアプリケーション。
個人的には毎年アドレス帳や去年の年賀状をみて送り先を一つ一つ確かめ、入力していた作業がアドレス帳と同期がとれることでかなり楽になるのがうれしいところ。Macであれば、YahooやGoogleのアカウントと同期がとれるようになっているのでGmailなどと問題なく住所録を共有することができます。
また、プリインストールされているテンプレートも豊富で、それ以外にもダウンロードサービスから新たにテンプレートを追加することができます。
気になったところはダウンロード版を購入したときのデータが1GBほどと大容量なところ。
無料トライアル版もあるので使用感を確かめてから購入できます。
宛名職人 for Mac(act2.com)
スマホサイトを作るときに気をつけているところ
スマホサイトを作るときに気をつけているところをまとめてみました。
片手、親指だけで操作できるナビゲーション配置
ボタンやタブのサイズは狭すぎず、細すぎず、リンクとリンクの間にマージンを設定して誤操作を防ぐといった配慮をしてレイアウトしたい。横に並べる数は３〜５が理想的。それ以上は押しづらい。
ヘッダーには要素を並べすぎないようにする
たまに目にするアクセスすると画面の3/4がヘッダー＋メニューのサイト。コンテンツが増えるとヘッダーのメニューが増えるといったことは避け、ページへアクセスした際にヘッダーで画面が埋まるといったことのないようにしたい。ナビゲーションメニューはプルダウンやダッシュボード化などで数が増えても対応できるようにするのが望ましい。
ページ遷移はできるだけ階層を深くしない
スマートフォン向けサイトはできる限りシンプルな遷移を意識して2,3クリックで目的のページへいけるような構成を心がける。「自分はどのページにいるのか？」「自分は何処のページを見たいのか？」ユーザーが意識して動けるようなナビゲーションリンクの配置にすることで離脱されないようにする。できればブラウザーの戻るボタンを押さずに完結できるようにしたい。
高解像度ディスプレイ×リキッドレイアウトを意識したデザインを行う
スマートフォンは回転すると横幅が変わるため、それを見越したデザインをする。たとえば、iPhone4は幅は320×480が基本ではあるが解像度は300dpi以上なので普通に画像をおいただけでは滲んだりして見えてしまう。画像は高解像度のdpiでもきれいに見えるサイズで用意して縮小させてレイアウトしたり、CSS3でアイコンの角丸やグラデーションを作る。縦横でも対応できるようにオブジェクトの配置は％指定やinline-blockを活用して不意なレイアウト崩れがおこらないようにする。などPC向けよりも気遣いが必要になる場面が多い。
Viewportを活用する
使いこなせるとかなり便利なViewport。デフォルト幅が320pxのブラウザーで480pxサイズのサイトを見せる際の設定などはviewportで行う。また、zoomを設定するとフォームのテキストエリアを選択したときに拡大表示されたりするといった動作があるのでその辺りも加味してデザインを行うとより、使いやすいナビゲーションに結びつけられる。タブレット端末では「initial-scale」が有効にならない場合があるのでターゲットとする場合は実機での検証が必須。
jQueryとCSSで気をつけたいこと
スマートフォンサイトでjQueryを使う際に気をつけたいのはliveがiOSで有効にならない点。clickやタグないに入れるonclickなどで代替できる場合は代替。できない場合はほかの方法を模索することになる。またCSSのfixedの挙動がiOSではまだ不完全なところが多いので使うことをさけた方がよいかもしれない。
制作時に参考になるサイト
ここでまとめた内容のより細かいところなどが掲載されていたので、より詳しいことは下記サイトを。。。
スマートフォン向けサイトの作り方｜ユージック
スマートフォンサイトをデザインする上で知っておくべき10のTIPS[to-R]