続・レスポンシブWebデザインとかアダプティブWebデザインとか
2013年6月19日 著 渡辺さんが、レスポンシブ・デザインとアダプティブ・デザインの定義を整理してみたのなかで僕の記事に言及してくださったので、改めて自分の解釈を覚え書きしておきます。 身もふたもないことを先に言っておくと、どうもこの「レスポンシブ」やら「アダプティブ」という言葉が最近、好きではありません。意味的にも発音的にも紛らわしく、厄介なことこの上ない。これらをそのまま日本語圏で（カタカナ表記にしろ英語表記にしろ）使うことについては、どちらかというと反対の立場。渡辺さんの記事で説明されているように、「アダプティブ」と言ってもそれがコンテンツの適応性を指すのか、それとも表示上の適応性のみを指すのか、文脈次第で変わるのも好きになれない理由。 閑話休題。レスポンシブWebデザインにしろアダプティブWebデザインにしろ、Webコンテンツをマルチデバイスに対応させるうえでの考え方であることは
ソシオメディア | サイトのモバイル対応パターン
ソシオメディアでは様々な業種や用途のUIについて、コンサルティング、設計、評価を行っていますが、昨今はやはり、モバイル向けのソリューションを扱う機会が多くなっています。例えば、スマートフォン向けウェブアプリ／サイトの構築もそのひとつです。 PCブラウザをメインのターゲットとして運用してきた自社のウェブアプリ／サイトをモバイルに対応させるにあたって、制作面でのノウハウは世間で色々と語られています。しかしその前に、そもそもの企画趣旨として、モバイル向けのサービスをどのような位置づけにするのかという観点から、デザインの方向性を考えなければいけません。 モバイル向けのウェブアプリ／サイトをデザインする際に考えなければいけないのは、まず、モバイルユーザーの利用状況です。一般的には、PCでのウェブ利用にくらべて次のようなことが言えます。 小さなスクリーン タッチによる操作 低スペックのプロセッサ、メモ
壊れたデザインプロセス（「The Broken Design Process」日本語訳）
2012年8月12日 著 以下の文章は、Philip Zastrow氏の書かれた「The Broken Design Process」を翻訳したものです。レスポンシブWebデザイン関連の記事をこの数ヶ月、いろいろ斜め読みしてきましたが、これは是非とも翻訳しておきたいと思ってZastrow氏にコンタクト、翻訳と掲載につき了解を得ました。ただし、この翻訳には誤りが含まれている可能性があります。英語が読めるなら、原文のほうを是非お読みください。 Webデザインのプロセスは壊れており、レスポンシブWebデザイン（訳者注：以後「RWD」と表記）の推進によって、モダンなアプローチを余儀なくされつつある。 典型的なデザインプロセスでは、理想化されたWebサイトのコンセプトイメージが写真編集アプリを用いて制作される。そして、コンセプトイメージを顧客または承認する立場にある権威に渡し、フィードバックや批判を
Firefox Developers Conference 2012 in Osakaでの講演内容
2012年7月5日 著 先日登壇させていただいたFirefox Developers Conference 2012 in Osakaで、トークセッション「Writing HTML ～これからの HTML の書き方～」の前座として講演したときのスライド「ミツエーリンクス 自社サイトの取り組み」が、勤務先のSlideShareアカウントにて公開されたので、こちらでも紹介しておきます。 スライドに載っている字面「だけ」を追うと、非常にあっさりした内容に映ると思いますが、口頭ではある程度、内容を掘り下げてお話したつもりです。NightlyのResponsive Modeを使った簡単なデモも織り交ぜましたし。そのあたりは、いずれMozilla Japanさんのほうで録画を公開されると思いますので、よろしければそのときにでもご覧ください。 ちなみに、最後のスライド「これからのWebデザイン」の末尾で
Useful jQuery Function Demos For Your Projects — Smashing Magazine
This article sheds lights on some of the most popular jQuery functions that you can use to write fantastic code for your next Web development projects. Every aspiring Web developer should know about the power of JavaScript and how it can be used to enhance the ways in which people see and interact with Web pages. Fortunately, to help us be more productive, we can use the power of JavaScript librar
PatternCooler
Patterncooler 3.1 - Fun, Free and even cooler! Apply your own colors, size and texture effects to thousands of pattern designs and download as seamless background images for FREE. Unlimited large tiles over 300px x 300px* and pattern area graphics can be obtained via the new license plans. This simple web app has been designed to provide seamless pattern images, for the use in creating:- Twitter,
Web Hosting, Reseller Hosting, Cloud Hosting & VPS Servers - Eleven2.com
Instantly setup your website, email, and start today! We are running a special on WordPress hosting solutions. We know WordPress, all our staff are WordPress experts. If you want to start an online store, a blog, or anything else, Eleven2 is the right place to be. What are you waiting for, Start now!
HTMLで文字詰めするタイポグラフィー用JS | fladdict
HTMLのテキストに対して、文字詰めを行えるスクリプト FLAutoKerningクラスを作ってみた。サンプルはこちら。zipも。 スクリプト内に任意のカーニングペアを定義することによって、ブログのタイトル等のテキストに字詰めを行ってくれるスクリプトです。なんか探しても見つからなかったので自分でやってみた。いちおう朗文堂の新宿私塾に行ったわけだし、僕もなんか成果物作らんとなぁ。。。的に。 実行はとても簡単。jQueryと一緒にhtmlにロードして、 FLAutoKerning.process($(‘h1′)); FLAutoKerning.process($(‘h2′)); FLAutoKerning.process($(‘h3′)); といった具合に、適用したhtml要素を一括していしてやるだけ。カーニング情報の定義も、FLAutoKerningクラスの頭に、下のようにem単位で定義する
百景
百景 という、テレビ・舞台の美術やマンションギャラリーなどの企画・設計・制作を手がけるデザイン会社の Web サイト作りをお手伝いしました。私がひとりでデザインから実装まですべて手がけたのは、自分の個人サイト以外でははじめてです。 クライアントは設立して 1 年、従業員 5 名の会社で、今まで Web サイトを持っていませんでした。そのため、私が今までの仕事でおもに担当してきたフロントエンド部分だけでなく、クライアントとの打ち合わせをはじめ、ドメインやサーバの手配、情報設計、ライティングなど、Web サイト作りの過程をひととおり経験することができました。 Web デザインの現場では、まずヴィジュアル・デザインのモックアップ (カンプ) を Photoshop や Fireworks で作り、それをクライアントに見せてゴーサインをもらい、そしてフロントエンドの実装に入る、という流れが一般的で
iPhone向けWebサイトを作るのに最適なテンプレート&JavaScript·moobile MOONGIFT
moobileはHTML/JavaScript製のフリーウェア（ソースコードは公開されている）。iPhone/Androidを中心とするスマートフォンのシェア拡大は留まることを知らない。モバイルネットワークが発展している限り、この流れは止まることはないだろう。Webサイトを提供する上でもスマートフォンは欠かせない存在になる。 ボタンバー ネイティブアプリを提供する手もあるが、もっと容易なのが最適化されたWebサイトを提供することだ。そもそもネイティブアプリを提供するほどのニーズがないサービスもあるはずだ。そこで使えるのがmoobileになる。 moobileはiPhoneやAndroidといったWebKitベースに対応したWebサイトフレームワークだ。HTML5で作成されているのが特徴だ。フォームやボタン、ボタンバーなどのUIをテンプレート化している。これを使えば最適化されたWebサイトが
Function Web Design & Development Blog - » Smashing Magazine Redesign: Photographs & Screenshots
We explain the work we did on the site and we show some exclusive content Last year we took on one of our biggest projects yet, working on the new Smashing Magazine re-design. In this post we’ll look at some of the elements we designed for the project, many of which nobody has seen before. The Brief The brief was for a re-fresh or update of the current design, rather than a overhaul. They wanted t
ブラウザ上でサイトのモックアップを光速で作成できるサービス「Lumzy」:phpspot開発日誌
Lumzy ブラウザ上でサイトのモックアップを光速で作成できるサービス「Lumzy」というのが公開されているみたい。 デザイナーさんであれば、Photoshopでまずデザインを作るより、顧客にどういうサイトを作るか、イメージしてもらうためにモックを作るわけですが、それがブラウザ上で高速にできちゃいます。 ネットブック片手にブラウザさえインストールしてネット環境さえあれば、顧客と相談しながらサイトのレイアウトを作っていっちゃえますね。 サインアップとか無しにすぐに使えるところもGoodで、Flashを使った直感的なUIでモックアップをサクサク作れちゃいます。 ツールを立ち上げると、まずプロジェクト作成画面がでるので適当にいれて「Create Project」します。 作成すると、ボタンとかメニューバー、リスト、データグリッド、コンボボックスなどのありとあらゆるUIパーツが最初からそろっていて
テキストリンク色の変更で、70億円（！）を稼ぎだすことに成功したマイクロソフト - Feel Like A Fallinstar
ユーザビリティの中でも特に狭義の「テキストリンク色」を変えただけで、恐るべきビジネスインパクトが現れたという事例です。 実際に成果の変化が起こったのは、マイクロソフトが鋭意売り出し中の検索エンジン「Bing」です。 テキストリンクを、入念にテストし、8000万ドルの売り上げ増 マイクロソフトは従来、「Live Search」という形でもう少し明るい青（水色に近い）を採用していました。 Bingよりも、明るいというかすこし緑に近い感じの色がベースになっていますね。 ちょっと比べてみました。 （※Live Searchは画像検索からキャプチャを取っています） こう見ると確かに色はかなり変化しています。 CNETの記事によると、マイクロソフトはBingを作る過程でかなりの数の色をテストしたようです。 Microsoftは最終的に「Bing」となるものを設計していたとき、膨大な数の色を検証し、
iaspectrum.net -
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
22 Website Designs Inspired by Apple.com
It's well known that Apple is one of the most creative and innovative companies in the world, so it's no wonder that many software companies and web designers would choose to follow Apple's style of branding. The Apple website is one of the best websites out there due to its ease of use, functionality and the beautiful environment that it creates. I looked at websites that use one or more design e
35 Examples Of Masterful Lighting Effects In Web Design — Smashing Magazine
Using a light source the right way can add dimension and beauty to a website design. Strong light sources create a stark contrast between light areas and shadows in a design, making the elements look more realistic and dimensional and less flat. Some websites opt instead for a dim light source to create a soft glow around particular areas of the website, to attract the eye more subtly. Lighting ca
Front-End Design Conference '09 Wrap-up | CSS-Tricks
The Front-End Design Conference was made from a lot of “firsts”. Many of us speakers were speaking in front of an audience of peers for the first time since college Speech. For Dan Denney, it was his first time organizing and promoting an event. For me, it was my first time speaking or even attending a design conference, not to mention my first Gator-meat taco. But the overwhelming response from t
Free Typographic XHTML/CSS-Layouts For Your Designs — Smashing Magazine
In May we announced the Typographic Layout Design Contest that aimed to collect beautiful typographic (X)HTML+CSS-based layouts created by the design community and release them for free as a gift for the web design community. The response was overwhelming and we really had a hard time going through the designs, analyzing them and deciding which templates deserve the awards. Unfortunately, many tem
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Iine!
http://www.designwalker.com/2010/04/call-to-action.html
