Flash君とIE6君
といっても、まだまだHTML5の可能性や理解が難しい現状では
Flashは活躍しつづけそうです。
果たしてFlashは今後本当に必要とされなくなるのか...。
一方お葬式が行われたことがまだ記憶に新しいIE6ですが
愛用者が10%にも満たなくなった今でもクロスブラウザの範囲に入ってしまうこともしばしば。
クロスブラウザやタブレット、スマートフォン...。
Flashが良いのかHTML5がいいのか...現在が移行期で一番中途半端ですが、
HTML5で組むだけで「話題性」になる、ということにポイントを置くと
十分"アリ"と感じています。
(kana)
マルチデバイス対応でのCMSの在り方
これまではPCでWebサイトを閲覧する事が主だったのが、
スマートフォンやタブレット端末の普及により、Webサイトの在り方も多様化してきました。
それぞれのデバイスに最適化されたマルチデバイス対応へのニーズが急速に増えているのです。
そのため、Web制作をとりまく環境も大きく変わりつつあります。
ひとつのPCサイト制作では終わらず、様々なデバイスに対応したサイト制作が必要となるわけで、
それだけアウトプットされる情報が多岐に渡り、サイト更新などの運用面でも大変なコストと労力が
かかってきてしまいます。
そこでCMSとの連携が大変重要になってくるのです。
今までは、情報の更新性を高めて容易に更新できるようにするのが
主な目的だったのに対して、今後はデータの一元管理という点で、
CMSは非常に貢献するツールになるのではないでしょうか。
下記サイトは大変参考になるケースです。
株式会社ローソン
http://www.lawson.co.jp/index.html
Movable Type コンテスト2010では準グランプリを獲得しています。
スマートフォンやモバイルへの対応のほか、TwitterやFacebookといった
ソーシャルメディアサービスとの連携も行っており、Movable Type + Power CMS for MTを
活用して情報の一元管理をしています。
まさに今の時代に合ったサイト構築が実現されています。
ルヴァンヴェール
http://le-ventvert-wedding.com/
ジーピーオンラインでも自社オリジナルCMS「WOW」を使った
PC・モバイル・スマートフォンを制作しています。もしろん一元管理しています。
また、Flash非対応のスマートフォンのためHTML5によってインタラクティブな演出を補い、
かつSEO対策としての効果も期待できます。
その他にも、MovableTypeを使った大学サイトやアパレル系サイトなども制作してますが、
今後もこのようなCMSの需要はより一層増えていくでしょう。
(takanosuke)
スマホ向けコンテンツ作成のために知っておきたい、 使えるギャラリーサイトのリンク集
スマートフォンのシェアが高まるにつれて、ますますニーズが高まるスマートフォン向けコンテンツ。
スマホサイトの作成やUIデザインなどの参考に役立つ、
国内と海外の優れたデザインギャラリ―を一挙ご紹介!
スマートフォン向けコンテンツの作成や学習に、ぜひお役立てください。
国内ギャラリー
Phoneデザインボックス
スマホサイトとPCサイトの両方を1ページで紹介。PCサイトとの連動を考えるときの参考にもなります。
iPhoneデザインアーカイブ
国内・海外の優れたデザインサイトが集結。
スマートフォンサイト集めました。
カテゴリ―、カラー別のサイト分類付き。
ミートアイ
iPhoneポータルサイト。気になるサイトのURLをiPhoneに送信することができます。
海外ギャラリー
Mobile Awesomeness
サムネイルの種類が豊富で見やすいギャラリーです。
TappGala
インターフェイスのデザイン集。QRコード付き。
iPad and iPhone Design Inspirations Gallery
iOSのデザインサイト。iPhone、iPad向けのweb、app、game画面などを閲覧できます。
CSSiPhone
iPhone用サイトの参考に。
Mobile UI Patterns
シーン別のUIのスクリーンショット集。
lonvely ui
iPhone、iPadのUIのスクリーンショット集。
APPSITES
スマートデバイス、Macのアプリ紹介サイトのデザイン。
overlapps
アイコンの参考などに。
jQuery Mobile
jQuery Mobile Gallery
jQuery Mobileを使用したサイト制作の参考にどうぞ。
(yukari)
Photoshopのテキストエフェクト作り方40選
雲のような、煙のようで岩っぽいエフェクトをつける方法。
重厚感のあるデザインで使えそうです。ガウスのかけ方がポイント。
Design a Snowy Rock Text Effect in Photoshop
燃えているようなエフェクトをつける方法。
燃えているようなエフェクトをつける方法。
炎で一番熱くなっている所に別のグラデーションをかけると、どこから燃えているのかという感じが加わりリアリティが増します。
Dramatic Text on Fire Effect in Photoshop
後方から光と爆発が起こっているようなエフェクトをつける方法。
アクションものの映画とかで使われそうなダイナミックなテキスト。工程がすごく長いのでこれを作るのは苦労しますが、
覚えておくとデザインの幅が広がりそう。
Colorful Light Burst Text In Photoshop
ネオン効果のような、POPなエフェクトをつける方法。
エフェクトの8割はレイヤー効果で作れるのでかんたんにできます。普通のネオン効果で物足りない時に使えそう。
Glass Neon Text With Ornament Photoshop Tutorial
その他のチュートリアルはこちらから
「40+ Impressive Photoshop Text Effects Tutorials」
(seishi)
画面解像度のまとめ
デザインの際、ページ幅を決める上で判断材料となる画面解像度。
スマートフォン、タブレットPCの普及で、そのサイズもいろいろとなりました。
今回は、PC、スマートフォンに分けて主要な解像度をまとめてみました。
PC対応の画面解像度
まずはおなじみのPCの解像度。
1280×1024(SXGA)、1024×768(XGA)が今でも利用は多く、
ここを踏まえてページ幅を決めておけば無難、という印象です。
・XGA : 1024×768 (4:3)
・WXGA : 1280×800 (16:10)
・SXGA : 1280×1024 (5:4)
・HD : 1366×768 (16:9)
・WXGA+: 1440×900 (16:10)
・HD+ : 1600×900 (16:9)
・FHD : 1920×1080 (16:9)
・WUXGA: 1920×1200 (16:10)
スマートフォン対応の画面解像度
Android系のスマートフォンは機種によってサイズがまちまちですが、以下の4種類が主流の傾向です。
・720×1280
・540×960
・480×800
・480×854
これに加えてiPhone、iPadのサイズを踏まえる必要がありますね。
・320×480 (主な機種:iPhone3G / 3GS 他)
・640×960 (主な機種:iPhone4 / Au IS03 他)
・768×1024 (主な機種:iPad / iPad 2)
・720×1280(主な機種:GALAXY NEXUS SC-04D 他)
・540×960(主な機種:htc EVO 3D 他)
・480×800 (主な機種:Galaxy S / Nexus One 他)
・480×854 (主な機種:Xperia (SO-01B) / Xperia arc (SO-01C) 他)
・600×1024 (Galaxy Tab)
■参考:Hacking My Way ? itogのhack日記 : Androidデバイスのディスプレイサイズ、DPI一覧
(masanori)
スマートフォンのコーディングで気を付けたい4つのポイント
はじめに
現在、スマートフォンは大きく分けて2つのOS(iOS、Android)があります。
OSごとの仕様の違いも重要ですが、
特に問題になる端末の違いは画面の解像度で、
iOSは960×640px(iPhone4とiPhone3Gは同じサイズで表示できる)
Androidは800×480px?(端末によってサイズがバラバラだが、横幅は480pxが基本)
と、表示サイズが大きく異なります。
さらにスマートフォンは画面を横に回転させることもできるので、
解像度が縦横反対になることも想定しておかなければいけません。
iPhone4を基準としたデザインからコーディングをした場合の注意点とその参考サイトをまとめました。
iOSのSafariは様々な制限やバグがある
・画像のサイズ制限がある(GIF、PNG、TIFF画像のデコードサイズ制限は2メガピクセル)
・Web Fonts は使えない。
・zoomプロパティを使用した場合、特定の条件で文字が拡大するバグ
[参考サイト]
PhoneのSafariブラウザにおける、色んな制限|FINE lab.
http://lab.fine-net.com/modules/wordpress2/index.php?p=15
iPhoneで特定のzoomとfont-sizeの際に文字サイズが拡大するバグ|to-R
http://blog.webcreativepark.net/2011/04/07-063417.html
Android2.1以前はselect要素に対して、スタイルの高さに関連する指定が効かない
Androidでスタイル属性に高さを指定した場合、ボックスサイズが拡大されず、中のテキストのみ大きく表示されます。 対処方法として、背景画像を指定することでブラウザ標準の枠線を取り去ることができます。 また、CSS3である程度の装飾は可能にです。[参考サイト]
Android・iPhone向けwebサイト開発で知っておくと良いこと|村式流 イッパシエンジニアへの道
http://blog.ville.jp/2011/04/25/619
横に回転させた時に画面のサイズに合わせて拡大させたい場合
ワンソースで全てのスマートフォンに横幅をフィットさせる方法です。 この方法を使えば一回のコーディングですべての端末に反映することが可能ですが、 端末ごとに拡大縮小をすることになるので、文字サイズが読みづらくなったり、 逆に大きくなりすぎたりする場合があり、けして万能な方法ではありません。 また、Android2.1以降でselectボックスのサイズを大きくするときの懸念点として、 zoomプロパティを使用した場合に発生するiPhoneの文字の表示バグ等があります。 使用する場合は表示チェックを入念にしなければいけません。[参考サイト]
スマートフォンのサイトを横に回転させた時に画面のサイズに合わせて拡大させるには|これからゆっくり考L +α http://sakaki0214.com/2011/06/05223738.html
スマートフォンサイトで文字サイズが違う場合
iOSのsafariではフォントサイズが自動アジャストされ、PCで見ていたサイズとかなり差異がある場合があります。 それを解消するためにcssに-webkit-text-size-adjust というプロパティを使用することで、フォントサイズの変更が可能になります。 このプロパティはwebkit特有の特有のプロパティで、基本はautoになっています。 必要があれば変更するぐらいで、基本的にはあまり使用しません。[参考サイト]
項目:文字サイズの自動アジャスト|@IT
http://www.atmarkit.co.jp/fsmart/articles/iphone/04.html
iPhone/Androidサイトで文字サイズを固定する方法|Web Designing satoimo18+
http://www.satoimo18.com/archives/136
スマートフォンはPCと比べて比較的コーディングはしやすいですが、 実機チェックと対応バージョンの考慮など、様々な制限があるので、 要件をしっかり決めてから、デザイン、コーディングを進めるのが重要です。
(kazuki)