サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
all-web-blog.blogspot.com
1pxのズレはコーディングできないデザイン! DTPの世界でもグリットシステムは利用し、数値を利用して配置するデザインは基本中の基本ですね。 しかしながら、マウスを引っ張って配置するようなデザインをして、数値を利用したデザイン配置をしないデザイナーが存在します。 感覚だけで配置するデザインなので、1pxのズレなども多く発生します。このようなデザインをコーディングには大変なことなります。正直言うと、コーディングできないデザインなのです。 そんな当たり前のことができていないデザイナーが多い?ことから、海外では「photoshopetiquette」Photoshop エチケットというコンテンツがありましたのでご紹介いたします。 日本でも同様に起きていますね!弊社でもこのようなデザイン、ファイルを納品されて困ったケースがあり、受講生に聞いても同じ悩みがあるようです。 プロとして最低限のマナーなの
レスポンシブWebデザインの弱点の1つにパフォーマンスがあります。allWebクリエイター塾のウェブサイトもレスポンシブWebデザインで作成されています。ページ下部に配置しているナビゲーションに「スクロールパフォーマンス」という問題がありました。 「スクロールパフォーマンス」とはスクロールした際の「垂直方向の画面の動きのスムーズさ」を意味します。スクロールパフォーマンスが悪いとユーザーはスクロールした際に画面がひっかかったような印象うけ、ユーザー・エクスペリエンスを損ないます。 今回、リサーチをして検証した結果「スクロールパフォーマンス」が改善できたのでご紹介します。 allWebクリエイター塾のナビゲーションの問題 allWebクリエイター塾のWebサイトは、ナビゲーションを画面の最下部に配置しています。これは、タブレットでユーザーがナビゲーションボタンを押しやすいという理由からです 赤
注:この記事は、2013年にアップした記事をリライトしたものです 「デザインニング・イン・ザ・ブラウザ」とはブラウザの中でHTMLとCSSを利用してデザインまで組み上げていく手法です。RWDの広まりとともに昨今ではこの手法を実践するデザイナーが多くなってきています。 Webデザイナーの中には気づく人も出現 3年ぶりくらいに allWebクリエイター塾 の レスポンシブWebデザイン 基礎講座に参加されたWebデザイナーがいました。その方が単発講座からコースに切り替えて本格的に勉強しよう思いついたのは レスポンシブWebデザイン(以下RWD)講座を受講されてからです。 「どうしてコースに変更したいと思ったのか?」と伺ったところ、 「RWD講座で利用したサンプルにCSS3が使われている部分があって、どのような仕組みかわからなかった」という点と、 「RWDの作業ではPSDのカンプに限
「レスポンシブWebデザインについて半年や○カ月運営して〜〜」などのタイトルブログをよくみかけるので、僕からも同様の内容を。ここでは、レスポンシブWebデザインについて約4年研究と実践して考えた事を綴ります。 (アスキー書籍担当のKさん、すいません。ちょっとばかりブログを書かせてください) レスポンシブWebデザインの流れと4年の理由? レスポンシブWebデザインはEthan Marcotte 氏が2010年5月に提唱、命名したものです。2012年8月現在から4年というのは時間のつじつまが合わない!?と思われる方がいらっしゃると思いますが、4年でいいんです。 厳密には「レスポンシブWebデザイン」とは異なる部分もありますがEthan Marcotte氏のブログで当時「FLUID IMAGE」 というタイトルで記事で紹介されていたり、 Ethan Marcotte氏の会社 Airbag で
海外カンファレンスに出る理由 allWebクリエイター塾の講師の菊池です。今年は積極的に海外カンファレンスに出席しています。どうして参加しているのか? 理由は参加する前に今年のカンファレンスのセッション内容を幾つも見たのですが、「Future of〜」と未来について語るセッションが目立つのが特徴でした。Webがパラダイムシフトを起こしているのを感じているのかなと感じるセッション名でした。これが海外カンファレンス参加へと突き動かした一番の理由です。 海外のカンファレンスで感じたこと Webアプリの話題がとにかく多い。 デザイナーだけどプログラミングができる人が増えている。 Webを別のものとして捉えている。 1,Webアプリの話題がとにかく多い。 とにかく今年のカンファレンスの話題で多いのが、Webアプリの話題です。作成方法についてネイティブアプリとのギャップを埋める為の技術にフォーカスした
日本は工業国として非常に成功したとおもいます。電化製品は80年代、90年代は世界トップクラスの品質でした。これは非常に誇るべきことです。私も学生時代にはソニーの製品ばかりを愛用していました。皆さんもmade in Japanが誇りだったこともあるでしょう。 世界一が生み出したもの 日本では、この世界一の工業国としての経験から「カイゼン」「5S」などの言葉が生まれ、今では世界でも「カイゼン」などという使われています。ポルシェの工場には「カイゼン」の表があるそうです。これは本当に素晴らしいことです。 工業国のワークフローをウェブにも利用した しかし、僕らはこの工業国としての成功した経験をウェブにも利用しているような気がしてならないのです。ウェブを工業製品のように扱い、工業製品のように製造しています。 コストを落とす事ばかり考えて、工場のように24時間体制で制作をおこない、 部門ごとに職種をわけ
画像置換という言葉を知っているでしょうか?テキストを「text-indent:-9999px」と指定して、画面の外に飛ばしてしまい背景画像をその代わりに表示する技術です。 画像置換の歴史 画像置換は長いこと使われているCSSのテクニックに1つでしょう。では、このテクニック自体はどのようにして、生まれてきたのでしょうか? 意外にも、このテクニックは元はC.Z.Robertson氏が1999年に考案し、それを「Todd Fahner」氏やTwitterのDouglas Bowman氏がチュートリアルで説明し、一般的に広めたものです。この時点ではテキストを非表示にするために「display:none」を利用しており、音声リーダーでは読み上げされないなどの問題がありました。 その後、このアクセシビリティ上の問題を解決するために「-9999px」というテクニックを生み出したのです。 現在の画像置換
先日、ついにjQuery Mobileの1.0正式版がリリースされ、いよいよ本格的な利用が視野に入ってきました。そこで、jQuery Mobileのここ最近の変更点の中から大きなものをピックアップしてお伝えしたいと思います。 テーマのカスタマイズツール「ThemeRoller」のリリース まずは、jQuery Mobileのオリジナルのテーマを作成することができるThemeRollerです。ThemeRollerは、これまで個別にスタイルを編集するしかなかったテーマのカスタマイズを簡単に行うことができます。各カラーをドラッグ&ドロップで簡単に変更できたり、左側のインスペクタパネルで詳細に変更することができたりします。是非ともお試しください。 大幅なパフォーマンスUP これまでマイナーバージョンアップが行われるたびにチューニングされていましたが、正式版となる1.0では、さらに30%〜50%の
Prefixrは、CSS3のベンダープレフィックスをいい感じに追加してくれるサービスです。An Update on Nettuts Prefixr | Nettuts という記事を読み、Espresso、Codaなどに対応していることを知り、Espressoで試してみました。 PrefixrのAPIページを開くと、現在の対応アプリケーションが記載されています。Espresso、Code、Sublime Text 2などのエディタに対応しています。変わったところではAlfredにも対応しています。 Espressoのプラグイン(Sugar)をダウンロードして試してみました。 まずは、ベンダープレフィックスなしのスタイルを記載します。 『Action』メニューから「Prefixr」→「Update Section or Document」コマンドを実行すると一瞬で変換されます。 ベンダープリフ
「animatable」は、CSS3の transition を適用できるプロパティを一覧を掲載しています。ウェブサイト作成時に、無意味なCSSプロパティを指定をすることはブラウザのレンダリングパフォーマンスを落とします。このツールを使えば余計なプロパティにアニメーションを指定しなくて済みます。 掲載されているプロパティ一覧 ここにあるプロパティはtransitionを指定できます。 background-color background-position background-size border-radius border-width box-shadow color font-size width height letter-spacing line-height opacity outline text-indent text-shadow top transform trans
allWebのウェブサイトのバナー作成する際、よくHTML5のロゴが必要になったりします。でもW3Cの公式サイトでダウンロードをしようとすると、「SVG」と「PNG」しかありません。これでは加工が大変なので、PSDデータとかaiデータがないかと(SVGはイラストレーターでは開けられますが、aiファイルが便利だったするので)探していました。
レスポンシブWebデザイン の為のツール Responsive Web Design でウェブサイトを作製するときに、複数の画面サイズを一覧で確認できなくて困った事はありませんか? そんな時に、「Resposive Design Testing」は最適なツールです。 このツールは、スクリーンキャプチャーのURLボックスに、確認したいファイルのパスを入力すれば、横幅240px、320px、480px、768px、1024px のそれぞれのデザインを確認することができます。 ウィンドウサイズを自分で変更する必要がないのは時間を短縮することができます。 また、この「Responsive Design Testing 」はダウンロードしてローカルで利用することもできます。 まとめ 「Responsive Design Testing」のようなツールが最近では、見られるようになりました。やはり、レス
しかし、残念ながらiOS4.Xは position:fixed; は指定できません。そこで紹介したいのが「Scrollability」です。「Scrollability」は JavaScript で要素が画面最下部へ固定できます。
Google は 7月28日(米国時間)に「Page Speed Service」を発表しました。このサービスはGoogleがあなたのウェブサイトを高速化して配信してくれるというものです。このサービスを利用すると、CSSやJSの最適化などについて面倒な作業をすることは必要なくなります。 最大60%のスピードアップも このサービスを利用すると、Google は最大60%以上高速化されることを謳っています。 下記のようなサンプルギャラリーが用意されているので、実際にどのくらい高速化されているのかを確認してみよう。
スマホのデザインを考えるとき、UIの参考になるウェブサイトがあると非常に便利です。そんなサイトを2つ紹介します。 1つは 「Moible UI Pattern」もう一つは「lovely ui」です。どちらも、様々なウェブサイトのUIパターンだけを紹介しています。 Moible UI Pattern Mobile UI Patter は、いろんなスマホサイトのUIデザインがカテゴリーごとに比較されています。例えば、サインアップのフローなどもスクリーンショットで公開されています。
「CSS Lint」は、CSS記述方法によるパフォーマンスをチェックできるツールです。開発したのは、Yahoo!、 Facebook でパフォーマンスチームだった Nicole Sullivan(ニコール・サリバン)です。Web Directions East 2009 で来日したこともあります。 モバイル端末の普及によって、回線速度が十分でない3GでもWebを快適に利用する為には様々な対策を講じる必要になってきました。テキスト量の制限からCSS, HTML, JS の最適化も重要な対策事項です。 このツールは、CSSの記述方法についてのパフォーマンスの側面から検証ができます。 チェックボックスで検証したい項目を自由に選択できますので自分で意図して検証にひっかかるCSSの記述を利用している項目があれば、予めチェックを外しておくことをオススメします。 下記にCSS LINT のドキュメントを
iPhone 向けのウェブサイトを開発する場合、必ずといっていいほどお世話になるのが iPhone シミュレーター。今回はそのインストール方法をご紹介します。まず大前提として お使いのマシンが mac であることが前提となります。 Apple ID の取得 まず Apple ID の取得の確認が第一歩になります。(すでに取得している人は「ログイン」へ移動してください)そのためにはまずは Apple の開発者用のページ「iOS Dev Center」へいきましょう。
Dreamweaver CS5.5とjQueryMobileを使えばスマートフォンサイトは簡単に作成できますが、やはり使いこなすためには、CS5.5だけでは不足な部分や注意点を知っていなければなりません。 ここであげた点について自信を持って大丈夫と言える人はDW CS5.5+jQuery Mobileマスターといえるのではないでしょうか。 1. jQuery Mobileの要素を簡単に作成することはできますが、オプションは基本的な項目のみです。また、いったん出力した要素のオプションは変更できません。 →手動で属性を追加したり変更したりする必要がでてきます。 2. コードの自動補完は属性名の候補などは出ますが、そもそもどの要素にどの属性を付けられるかなどには対応していません。 →属性の内容や効果については知っておく必要があります。属性名がうろ覚えでも指定できたり、タイプミスを防ぐものになりま
先日行われたSwapSkillsFreeEvent(3)「Dreamweaver CS5.5で作るjQuery Mobileを組み込んだスマートフォンサイト制作」で講演した際に要望の多かったスニペットを+αして公開します。 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script> // 初期設定 $(document).bind('mobileinit', function(){ // 日本語化 $.mobile.loadingMessage = '読み込み中'; $.mobile.pageLoad
allWebクリエイター塾 ブログでは、Responsive Web Design(レスポンシブ・ウェブデザイン) をよく取り上げています。では、実際に一般のウェブサイトや個人以外のウェブサイトで Responsive Web Design を利用しているサイトはどのくらいあるでしょう?ということで探してみました。特に一般の企業を中心に集めてみましたので、レスポンシブ・ウェブデザインが一般企業でどこが利用しているのか興味がある方は、是非とも参考にしてみてください。 新聞編 About.comなんと、New York Time の一部である、「About.com」ですが、レスポンシブウェブデザインです。日本の各新聞にもそのビジネスモデルまで影響をあたえる「New York Times」までもが Responsive Web Design(レスポンシブ・ウェブデザイン)とは驚きですね。海外では
スマートフォンのデザインをする際の UI のサイズには誰もが最初は悩んでしまいます。そんな時に役に立つのが、Android や iOSのUI のガイドラインです。その中から、ボタンのサイズに関する部分だけを抜き出して集めました。 ボタンのタッチ部分のサイズは最小で高さと幅は44ptが推奨されているみたいです。ただし、2010年に開催された Apple Tech Talk にてApple のUIデザイナーの Eric Hope 氏は、垂直方向へボタンがかさならないのであれば、例外として高さは 最小で22ptをOKとしていると話しています。事実、iPhone のランドスケープモードでは44px x 44px ではなく、48px x 38pxの高さのボタンも見受けられます。
CSS3を勉強する際に大切なことは2つあります。ひとつ目は、”知っているプロパティをいかに上手に使うかということ”、二つ目は、”知らないプロパティをもっと勉強すること”だと言えます。 今回は、後者のあまり知られていないであろう「rem」を紹介いたします。とは言っても「rem」は プロパティではなく単位になります。単位表示でおなじみの「em:エム」に似ていますが「em」の様に親要素の値に影響を受ける事はありません。 フォントサイズの指定を考えてみましょう。 「px」を利用するとフォントサイズを固定することができて制作する際には便利だったりしますが、最近ではスマートフォンなどのモバイルサイト向けに「Responsive Web Design」というデザイン手法で「em」のような相対単位を「Responsive Type Setting」として利用します。 ただし、IE では「em」を利用すると
レスポンシブ・ウェブデザインで大きなポイントとなるのが、メディアクエリのサイズの設定です。以前に「mediaqueries」に掲載されているウェブサイトの メディアクエリのサイズを調査したことがありましたが、今回は メディアクエリのサイズの設定について詳しく紹介したいと思います。 メディアクエリのサイズメディアクエリのサイズですが、 800px –ネットブック、Nexus One、Dell Streak などのサイズ。 600px – タブレット端末、例えば SamuSung ギャラクシー、Blackberry Playbook。iPhone 4 のポートレートのサイズは少し大きい 640pxなので、800pxのスタイルシートが iPhone4 のポートレートでは適用される。 480px – スマートフォンでは一般的なサイズ、3GS以下のiPhone のポートレートモードもこのサイズ。 3
allWebクリエイター塾のスマートフォン講座では、レスポンシブ・ウェブデザインを徹底的に教え込みます。そのなかで、IE6-8 (IE6はすでに対象外かもしれません)へ Media Queries を適用する JSを紹介しています。それが、「respond.js」です。 「respond.js」は 非常に軽くて(最小化バージョン3kb /gzipバージョン 1kb)使いやすい JavaScript ライブラリです。作成したのは、jQuery UI や thmem roller などを作成した 「Scott Jehl」、最近人気が急上昇の開発者です。jQuery Mobile も大きく関わっています。 利用方法 利用方法は簡単で、「respond.js」を<head></head>内の CSSファイルの後に設置するだけです。 <head> <meta charset="utf-8" /> <
ul.box { margin: 0; padding: 0; clear: both; overflow: hidden; } ul.box li { list-style-type: none; margin: 0 30px 30px 0; padding: 0; width: 250px; height: 150px; border: 1px solid #efefef; position: relative; float: left; background: #ffffff; /* old browsers */ -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0
先日、レスポンシブ・ウェブデザインのウェブサイトを集めた「mediaquri.es」を紹介しましたが、周りの人からそもそも「レスポンシブ・ウェブデザイン」が何かということを説明して欲しいと言われました。 レスポンシブ・ウェブデザインとは 「レスポンシブ」は「反応型」とも解釈することができます。何に反応するのかというと、「スクリーンの幅」です。「レイアウト」がデバイスのスリーンの幅に反応して可変をしていくのが「レスポンシブ・ウェブデザイン」です。現在では、iPhone のみならず Android など多様なスクリーンサイズをもったデバイスが出現しています。特定のデバイスのスクリーンサイズに合わせてウェブサイトのレイアウトを作成すると、他のデバイスで上手く表示されない問題などが発生します。デバイスを基準に考えるのではなくて、スクリーンのサイズを元に考えようというのがレスポンシブ・ウェブデザイン
最近では、すっかりCSS3を利用する人には定着した「modernizr」当初は、CSS3の対応状況をチェックするツールと誤解をしていた人も多くいました。しかし、このツールは、CSS3やHTML5のサポート状況をclass名としてhtml要素に反映し、そのclass名を利用して「プログレッシブ・エンハンスメント」を適用するJavaScriptです。 html 要素に CSS3のサポートされているか?されていないか?で別々の class名を記述します。 例えばブラウザが「multiple background」を サポートしている場合 <html class="multiplebgs"> </html> サポートしていない場合 <html class="no-multiplebgs"> </html> CSSの記述 .multiplebgs div p { /* properties for
2010年4月にバーミンガム(英)で開催された Dan Rubin氏のモバイルのワークショップへ参加した時に彼から、米国には「モバイル・サイコロジスト」(モバイル心理学者)がいると聞きました。またモバイル・サイコロジストが近い将来 モバイルのウェブサイトを設計してからデスクトップを設計することを主張していると聞かされました。これが、自分が初めて「モバイル・ファースト」に出会った瞬間です。 前置きが長くなりましたが 「モバイル・ファースト」というのは、 ウェブサイトの設計をするときにモバイル版のウェブサイトの設計から始めるという手法です。すこし噛み砕くと、デスクトップ版を作成し、その情報をそぎ落としてモバイル版を作成する「デスクトップファースト」ではなく、本当に必要な情報や機能を最初に決定してモバイル版を作成してから、デスクトップ版では他に必要だとおもわれる情報を慎重に付け加えていく手法です
スマートフォンのサイト制作する際に、モバイルのブラウザについて知ることは非常に大切です。実際に モバイルのウェブサイトを制作すると 色んなことに気付かされたり、失敗したりします。今回、世界でも日本でもモバイルで圧倒的なシェアを誇る モバイルWebkitを調べてみました。そして CSSのサポートが悪くクライアントの案件にてサポートから外すべきブラウザがわかってきました。 まずiPhone や Android の搭載されているブラウザは 「モバイルWebkit」といいましたが、ブラウザの研究で非常に有名なオランダの Peter Paul Koch は自身のブログで「There is no WebKit on Mobile(Webkitはモバイルには存在しない)」でどのように違うのかを説明しています。 彼は19種類のモバイルWebkitを27種類のテストで試したそうです。その結果、2つとして同じ
次のページ
このページを最初にブックマークしてみませんか?
『allWebクリエイター塾 ブログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く