グレヌデサ La graine du dessin
Graphic

Flash君とIE6君

matsukura_20111226.gif

といっても、まだまだHTML5の可能性や理解が難しい現状では
Flashは活躍しつづけそうです。

果たしてFlashは今後本当に必要とされなくなるのか...。

一方お葬式が行われたことがまだ記憶に新しいIE6ですが
愛用者が10%にも満たなくなった今でもクロスブラウザの範囲に入ってしまうこともしばしば。

クロスブラウザやタブレット、スマートフォン...。
Flashが良いのかHTML5がいいのか...現在が移行期で一番中途半端ですが、
HTML5で組むだけで「話題性」になる、ということにポイントを置くと
十分"アリ"と感じています。


(kana)

Coding

マルチデバイス対応でのCMSの在り方

これまではPCでWebサイトを閲覧する事が主だったのが、
スマートフォンやタブレット端末の普及により、Webサイトの在り方も多様化してきました。
それぞれのデバイスに最適化されたマルチデバイス対応へのニーズが急速に増えているのです。


そのため、Web制作をとりまく環境も大きく変わりつつあります。
ひとつのPCサイト制作では終わらず、様々なデバイスに対応したサイト制作が必要となるわけで、
それだけアウトプットされる情報が多岐に渡り、サイト更新などの運用面でも大変なコストと労力が
かかってきてしまいます。


そこでCMSとの連携が大変重要になってくるのです。
今までは、情報の更新性を高めて容易に更新できるようにするのが
主な目的だったのに対して、今後はデータの一元管理という点で、
CMSは非常に貢献するツールになるのではないでしょうか。
下記サイトは大変参考になるケースです。


株式会社ローソン


0926_loason.png
http://www.lawson.co.jp/index.html
Movable Type コンテスト2010では準グランプリを獲得しています。
スマートフォンやモバイルへの対応のほか、TwitterやFacebookといった
ソーシャルメディアサービスとの連携も行っており、Movable Type + Power CMS for MTを
活用して情報の一元管理をしています。
まさに今の時代に合ったサイト構築が実現されています。


ルヴァンヴェール


0926_lvan.png
http://le-ventvert-wedding.com/
ジーピーオンラインでも自社オリジナルCMS「WOW」を使った
PC・モバイル・スマートフォンを制作しています。もしろん一元管理しています。
また、Flash非対応のスマートフォンのためHTML5によってインタラクティブな演出を補い、
かつSEO対策としての効果も期待できます。


その他にも、MovableTypeを使った大学サイトやアパレル系サイトなども制作してますが、
今後もこのようなCMSの需要はより一層増えていくでしょう。


(takanosuke)

Web service

スマホ向けコンテンツ作成のために知っておきたい、 使えるギャラリーサイトのリンク集

スマートフォンのシェアが高まるにつれて、ますますニーズが高まるスマートフォン向けコンテンツ。
スマホサイトの作成やUIデザインなどの参考に役立つ、
国内と海外の優れたデザインギャラリ―を一挙ご紹介!
スマートフォン向けコンテンツの作成や学習に、ぜひお役立てください。

国内ギャラリー

Phoneデザインボックス
01_デザインボックス.jpg スマホサイトとPCサイトの両方を1ページで紹介。PCサイトとの連動を考えるときの参考にもなります。


iPhoneデザインアーカイブ
02デザインアーカイブ.jpg国内・海外の優れたデザインサイトが集結。


スマートフォンサイト集めました。

03_スマホサイトあつめ.jpgカテゴリ―、カラー別のサイト分類付き。


ミートアイ

04_meet1.jpgiPhoneポータルサイト。気になるサイトのURLをiPhoneに送信することができます。

海外ギャラリー

Mobile Awesomeness
05_Mobile Awesomeness.jpgサムネイルの種類が豊富で見やすいギャラリーです。


TappGala

07_tappgala.jpgインターフェイスのデザイン集。QRコード付き。


iPad and iPhone Design Inspirations Gallery
08_Inspirations Gallery.jpgiOSのデザインサイト。iPhone、iPad向けのweb、app、game画面などを閲覧できます。


CSSiPhone

06_CSSiPhone.jpgiPhone用サイトの参考に。


Mobile UI Patterns

09_uiパターン.jpgシーン別のUIのスクリーンショット集。


lonvely ui

10_lonvely ui.jpgiPhone、iPadのUIのスクリーンショット集。


APPSITES

10_APPSITES.jpgスマートデバイス、Macのアプリ紹介サイトのデザイン。


overlapps

11_overlapps.jpgアイコンの参考などに。

jQuery Mobile

jQuery Mobile Gallery
12_Jquery.jpgjQuery Mobileを使用したサイト制作の参考にどうぞ。




(yukari)

Graphic

Photoshopのテキストエフェクト作り方40選

フォトショップは写真加工やデザインなどのほかにテキストエフェクト作成にも使われます。 コチラの「40+ Impressive Photoshop Text Effects Tutorials」というサイトで すごくリアルな質感なものから幻想的なもの、意外と単純にできるものまで紹介されています。 今回は簡単にピックアップして紹介していきたいと思います。

雲のような、煙のようで岩っぽいエフェクトをつける方法。

img_01.jpg重厚感のあるデザインで使えそうです。
ガウスのかけ方がポイント。
Design a Snowy Rock Text Effect in Photoshop


燃えているようなエフェクトをつける方法。


photoshopimg_02.jpg燃えているようなエフェクトをつける方法。
炎で一番熱くなっている所に別のグラデーションをかけると、どこから燃えているのかという感じが加わりリアリティが増します。
Dramatic Text on Fire Effect in Photoshop


後方から光と爆発が起こっているようなエフェクトをつける方法。

photoshopimg_04.jpgアクションものの映画とかで使われそうなダイナミックなテキスト。
工程がすごく長いのでこれを作るのは苦労しますが、
覚えておくとデザインの幅が広がりそう。
Colorful Light Burst Text In Photoshop


ネオン効果のような、POPなエフェクトをつける方法。

photoshopimg_03.jpgエフェクトの8割はレイヤー効果で作れるのでかんたんにできます。
普通のネオン効果で物足りない時に使えそう。
Glass Neon Text With Ornament Photoshop Tutorial



その他のチュートリアルはこちらから
40+ Impressive Photoshop Text Effects Tutorials



(seishi)
続きを読む: Photoshopのテキストエフェクト作り方40選
Design Other

画面解像度のまとめ


デザインの際、ページ幅を決める上で判断材料となる画面解像度。
スマートフォン、タブレットPCの普及で、そのサイズもいろいろとなりました。
今回は、PC、スマートフォンに分けて主要な解像度をまとめてみました。


PC対応の画面解像度

まずはおなじみのPCの解像度。
1280×1024(SXGA)、1024×768(XGA)が今でも利用は多く、
ここを踏まえてページ幅を決めておけば無難、という印象です。




pc_kaizoudo.gif




・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のサイズを踏まえる必要がありますね。




smafo1.gif




・320×480 (主な機種:iPhone3G / 3GS 他)
・640×960 (主な機種:iPhone4 / Au IS03 他)
・768×1024 (主な機種:iPad / iPad 2)






smafo2.gif




・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)

Coding Tips

スマートフォンのコーディングで気を付けたい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)

1  2  3  4  5  6  7  8  9  10  11

Webトレンド情報局とは

クリエイティブグループスタッフがお送りする、Webデザイナーのための知識とTIPS。 PhotoShopの便利な豆知識や、CSSのお困り解決、デザイン概論などなど。
【隔週木曜日更新】

運営会社:株式会社ジーピーオンライン

RSSを購読する

Monthly Archive