レスポンシブに対応したWebサイト、コーポレートサイト向けのテンプレートファイルが探してもなかなか見つからないので試しに自分で作ってみました。
最近は基本LESSで作っているのでLESS版を無料、CSS版もワンコインで取り急ぎ公開です。（Macなのでバイナリデータが無駄にあるかもしれません）
LESSは制作時の時間短縮とファイル自体もCSSと比べかなり軽くなるのでスマートフォン向けのサイトを制作する際、かなり威力を発揮してくれます。
今後バリエーションやページなども増やしていくので、これからレスポンシブをはじめるという方や試してみたい方はぜひ使ってみてください。
様々なメーカーから出ているアンドロイド端末。
携帯電話キャリアから出ているものは高スペックで価格も高いため、もっと安く手に入れたいという人や、もっとかっこいいモデルが欲しいという人。
はたまたカスタマイズしたいという人もいると思うので自分がよく見ているサイトを紹介します。
アンドロイド端末のアプリや改造の情報が数多くあり、たまに発売前のスマートフォンのROMなども公開されているサイト。
日本で市販されている端末はほとんどSIMロック端末なので実際にROMを入れようとするとroot化をする必要があるなど、キャリア、メーカーの保証対象外になってしまう場合がありますが、より自由度の高いOSレベルでのカスタマイズや日本で発売されていない端末のデータなどを見つけることが出来ます。
アンドロイド端末は種類が多い反面、iPhoneと比べるとデザインのいいケースなどは量販店でなかなかみつけられません。しかし、グローバルモデルのXperiaシリーズやGALAXYシリーズなどはiPhoneケースを作っているメーカーなどもさまざまな種類のケースを出しているのでAmazonで検索するといいものが見つかったりします。
その他、スマートフォンの白ロムや海外版のSIMフリー端末など端末本体も探すことが出来るので、動作検証用にWifiでといった場合の選択肢として覚えておくと便利です。
韓国のネットショッピングサイト。
日本よりもスマートフォンが早くから普及していたり、SAMSUNGやLGなど端末メーカーがあるため、アクセサリーや本体なども検索するといろいろでてきます。アクセサリーなどには偽物もあるみたいなのでその辺りはシリアル番号の有無などでチェックしてみてください。
香港発のスマートフォン、タブレットなどの輸入代理店。端末が日本で買うよりもかなり安い価格で手に入れることが出来ます。(別途関税や運送費がかかります)
最近スマートガジェットというカテゴリーが出来、周辺アクセサリーがより充実してきたのでガジェット好きな人へのプレゼント探しなどにも使えます。
linked by blog-tools
今まで一色無地にしていたのですが、少し物足りなさを感じ、最近流行？の布地ライクなものに変更しました。
Gifなどにして色数を減らすことで反復しても違和感のない背景に仕上げることが出来ました。
hetemlで本日(2012/4/25)より、モリサワフォントをWebサイトで使えるようにする「TypeSquare」のサービスが12月31日まで無料で使えるということでcdbk.net CREATIVES.で早速導入してみました。
下が使用前のサイト(Mac/Chrome)の表示。
そして、下がTypeSquare適用後。
使用しているUDフォントによって可読性があがりました。
Web fontもだいぶ普及してきたのでこういった技術を使い、よりよいサイトを作っていきたいです。
以前作っていたデコメ用画像検索サイトをデザインしなおし、公開しました。
サイズ、使い勝手はスマートフォン向けに最適化、内容も出来る限りシンプルにしています。
検索エンジンにはGoogle Search APIを使用、使えば使うほどおかしいところ散見かもしれないですが、そこはBETAということで改善し続けていきます。
スマートフォンにしてデコメしたいけれど、画像がないといったかたにぜひ使ってもらいたいです。
この１年、タブレット向けのサイトを作る機会が増えてきたので実際の解像度とブラウザーの表示サイズが異なることで起こる問題の対処法をまとめました。
ターゲットとするタブレットのアスペクト値によって多少変わりますが、CSS3のmediaqueriesを使い、２サイズをだし分けるのが最も簡単で失敗しない方法だと思います。JavaScriptで回転した際にviewportを書き直してもよいのですが、端末によって挙動や動きが異なる場合が多いので、mediaqueriesなどプログラムをなるべく使わない方法でレイアウトを変更するのが得策。
書き方は
@media screen and (max-width: 820px) {/*820pxまでのサイズのとき*/body{}...}
@media screen and (min-width: 820px) {/*820px以上のサイズのとき*/body{}...}
といった書き方になります。
viewportをwidth=device-widthで設定したにもかかわらず、拡大表示される場合があります。
その場合はinitial-scaleを1以下の数字にして縮小表示させることでタブレットのサイズに合わせます。
たとえば
<meta name=”viewport” content=”width=device-width, initial-scale=0.66,minimum-scale=0.66,maximum-scale=2” />
といった書き方。
viewportやmediaqueriesを使い、サイズを合わせたものの、微妙に幅が合わず、スクロールが出てしまうときはCSSでbodyや一番外側のブロック要素にoverflow-x:hiddenの設定を追加します。
そもそもの改善にはなりませんが、横スクロールしなくなり、ユーザビリティが多少改善されます。
スマートフォンやタブレットでは出来る限り画面サイズ幅いっぱいにコンテンツを表示させたいので、幅指定を100％にすることを前提に、スマートフォンとタブレットでのコンテンツ表示を共有する場合やレスポンシブデザインを行う場合にはmediaqueriesを使い、全体幅とブロック要素の回り込み、表示非表示を制御します。
スマートフォンでもよく使われる方法ですが、JavaScriptを使い、アドレスバーを消すことで画面の高さーステータスバーの高さをコンテンツに当てることが出来ます。ランドスケープの場合ファーストビューの領域がアドレスバーで削られてしまうときの弊害が大きいので下のようなスクリプト(jQuery)を追加することで対処します。
function onloadpage(){
setTimeout(function(){
var h = $("body").scrollTop();
if(h==0){
setTimeout(function(){ window.scrollTo(0,1); },110);
setTimeout(function(){ window.scrollTo(0,0); },111);
}
},100);
}
読み込み中にユーザーがスクロールしているときには動作しないよう、スクロールを検知するようにしています。
気になるところはご指摘いただければ対応します。また何かわかれば追記します。
コーポレートサイトにjQueryベースでいろいろな機能を追加しました。
トップページのタイポグラフィーは上から表示されるように透明→非透明の効果を設定。
各ページヘはContact(お問い合わせ)を除き、ページ読み込みで下から上へイージングで表示されるようにしています。
その他サムネイルはリンクから、ページ内でフレーム上にウインドウを開き表示するLightbox的なものに変更。
最初右上に表示されている円はランダムに移動、色が変わります。
cdbk.net CREATIVES. http://creatives.cdbk.net
この1,2年でモバイルといえば携帯サイトだったものがスマホサイトになってしまい、これからどうしようか？ どうすればいいのかと思っている初心者の人も多いと思うので少しまとめました。
百聞一見に如かずで実際に触ってみるとわかることが本当に多く、 例えば、タッチパネルの操作ではボタンは押した感触がない反面、フリックやスライド操作ができるので、直感的に操作できることが多くなっています。
Twitterのスマホサイトではアプリケーションのようにスムーズに使えるよう、タイムラインを下に引っ張るとリロードされたり、ツイートをスライドするとReplyやRetweetアイコンが出てきたりします。 一昔前はFlashを使って動かしたりしていたものがJavaScriptの処理が高速化したため、HTML、CSSと連携させてJavaScriptでインターフェイスを作ることが一般的になっています。
先ほどのTwitterの事例のように、いつも使うようなサイトに使いやすいインターフェイスが提供され、ブログなどでもメニューボタンを押すとメニューが伸びてきたり、次のページヘ移動する際、更新されるのではなくスライドして次のページに進むようなギミックがあったりと、気にしてみると初心者にはどうやって作っているのかわからないことが数多く出てくると思います。 技術的には少し前に話題になったWEB2.0といわれるものの中の技術が使われ、一昔前に使っていたテーブルレイアウトは姿を消し、HTML+CSSをベースに幅が変わっても対応できるリキッドレイアウトや新たに出てきたレスポンシブレイアウト（デザイン）と言われるようなレイアウト手法が主流になりつつあり、実際にユーザーやクライアントが要求してくるようなスマホサイトを作ろうとするとHTML(HTML5)やCSS(CSS3)そしてJavaScriptの習得が必要になってきます。
HTML5とCSS3、JavaScriptを習得してサイトを作ることが出来れば一番いいのですが、より手っ取り早くスマホサイトを作りたい場合には
の3つの選択があります。
スマホサイトに対応したアプリケーションが増えてきたので、テンプレートをベースにコンテンツを作っていくような作り方をする際、効率的につくることができます。ただ、仕事を依頼されてデザインやコーディングを行う場合は、テンプレート上、表現の限界があるのでスライドショーは追加できるけれど、フリックで動作しない、ここのスペースには置けないといったことが出てくるので注意が必要です。 主なアプリケーション：BiNDやホームページビルダーなど
ブログやWebサイトサービスを使うとブログを編集するような感覚で比較的簡単にスマートフォンに対応させることができます。サービスを利用することでスマートフォン用に特別な編集をせずページを作成できるので初心者でも使いやすいと思います。主なサービスはJimdoやカラミーショップ(ECサイト向け)など
スマホサイトができたものの、iPhoneではちゃんと表示されるのにGalaxyでは崩れる、タブレットでは文字が小さく、レイアウトが広がって見辛い、画像がなんかぼやける。といったことがよく起こります。それに対応するにはネットで解決方法を探し、ない場合はトライアンドエラーを繰り返し、解決法を身につけていくほかありません。 時間がない場合、自分には難しすぎると感じた場合はプロに頼むという選択肢があることも念頭において、どのように作るかを考えて自分にあった選択肢を考えるといいと思います。
次回は具体的な作り方について書く予定です。
