お疲れ様です、大塚です。 Appleの新製品発表会が間近に迫ってきましたね。新しいiPhoneの発表はもちろんのこと、今年の「One more thing」も楽しみです。 しかしながら、新しいプロダクトにドキドキ・ワクワクしながらも、心のどこか冷静な部分で、 「また新しい解像度が出てきたわ…」 と、新しい苦悩を抱えてしまうエンジニアやディベロッパーの方も多いのではないでしょうか？高解像度ディスプレイを搭載したマルチデバイスへの対応は、なかなか骨が折れる作業ですからね。 …え、仕組みがよくわからないままコーディングしていたって？？ そいつぁーまずい。 なぜ、多くのスマートフォンやタブレット向けのWebサイトでは、画像が2倍で作られているのか？ その理由と、ディスプレイや解像度の仕組み、今日ここで覚えていって頂戴。 ディスプレイの仕組み ぼくたちが普段使用している、PCやスマートフォンのディス
WD101: PC脳な制作者にありがちな8つのアプローチ デスクトップパソコン時代と同じような感覚で設計されているスマートフォン向けサイトは少なくありません。PC脳から抜け出して、今必要とされるデザインの感覚を養わなければ、ますます利用者のニーズから遠ざかってしまいます。 WD101: 画面ではなく部品から始めてみよう 利用者環境を断定してページレイアウトを作れなくなった今日の Web デザイン。ページという枠を作ることから始めるのではなく、コンテンツをまとめる最小単位「コンポーネント」の設計から始めます。 WD101: Webデザインであるもの、そうでないもの これから「Webデザインしたい！」と考えている人たちが、何をもって良い Web デザインなのかが見え難くなる場合があるので、ひとつの方向性を示した項目を幾つか挙げてみました。 WD101: Webのデザインは枠のない世界である 適
A note from the editors: The responsive images spec has changed and sizes are now required. Eric Portis shares more details on the blog. The devil has put a penalty on all things we enjoy in life. Albert Einstein Sixty-two percent of the weight of the web is images, and we’re serving more image bytes every day. That would be peachy if all of those bytes were being put to good use. But on small or
2014年5月20日 少し前の記事ですが、日経BPコンサルティングスタッフルームに掲載された年寄りを困らせる「レスポンシブWebデザイン」を読んでの感想。確かに、レスポンシブWebデザイン（以下「RWD」）のユーザビリティ上の問題点について指摘はしているものの、その問題点は本当に高齢者に特有のものなのだろうか？ そして、記事中で紹介されている東北大学の対応策は本当に利用者の使い勝手を考えてきちんと吟味し、改善策を実践した結果なのだろうか？ などと疑問に思いました。 RWDを採用した場合、Webページがブラウザの拡大機能に反応してしまうとか、スマホでアクセスすると強制的にスマホ向けのレイアウトで表示されるのは、事実です。しかしいずれも、利用者が高齢者であろうとなかろうと同じ。結局のところ、記憶のなかにある慣れ親しんだレイアウトを頼りに、複数の異なるスクリーンサイズ間で自身の必要とする情報を探
Skala Preview is on hold for nowIf you’re still using Skala Preview, the latest versions of Skala View can be downloaded from the App Store and Google Play Store by viewing your purchase history and tapping the download button. The latest version of the Mac app can be downloaded here: Skala Preview 2.0.
今回も、このブログでいま流行りの「マルチデバイス時代」シリーズです。 前回に引き続き、これからのレスポンシブ・デザインについて書いていきます。今回はナビゲーションについてです。 BootstrapやFoundationで実装されているように、レスポンシブ・デザインでのナビゲーション・インターフェイスには標準的なものが確立されつつあります。しかし、それが従来のウェブサイトの構造に簡単に当てはめられるかというと、そうでもありません。使っている技術は根本的にはあまり変わりませんが、マルチデバイス時代の今、解決しようとしている課題は以前と大きく異なります。 全くサイズの違う複数の端末に、デスクトップ向けの考え方で作ったサイト構造を最適化しようとしているわけですから、ゼロから考え直さないと、根本的な解決は難しいのかもしれません。 そもそも従来型のナビゲーションは必要なのか レスポンシブ・デザインでサ
「Web」について今の自分が考えてることを記録として書いてます。去年に続き三回目です。タイトルに2014年が入ってるのは時間と共にWebのあり方や自分の考えも変わっていくからです。 はじめに 毎年恒例の記事三年目です。 「Webデザイン」とはなにか？じっくり考えてみた（2012年） 「Webデザイン」とはなにか？ザックリ考えてみた（2013年） 今年の内容は「Webデザイン」に収まらないのでタイトルを少し変えました。 更にwebの範疇を超えて”インターネット”に該当するであろう部分まで触れてますが、切り離して考えられないので”インターネット”も含めて考えています。 この記事は2013年の総括や2014年のトレンドではなく、Webについて今の自分が思ってることをつらつらと書いてます。異なる意見があって当然だと思ってますし、正解を出したい訳でもありません。 自分の考えを整理するため、そして読ん
By Ben Gremillion on 6th January, 2014 Updated on 22nd April, 2020 #Tutorials #UX Design How to set up breakpoints in this design? You probably ask yourselves this question a lot. Responsive design breakpoints are no rocket science and you don’t need to search the web for the proper breakpoint dimensions every time you design for responsive. As a matter of fact, the ultimate design aid in this mat
Welcome to We’ve redesigned our web experience with you in mind. A more immersive reading experience? We’re glad you asked. We’ve streamlined our article pages and created a more responsive interface with faster load times. So navigating between stories is easier and finding more content that appeals to you is just a click, swipe or tap away.
I can remember a time when pretty much everyone designed websites for an 800×600 screen resolution, but (thankfully) those days are long gone. Smart watches and 4k displays are pushing resolutions at both ends of the spectrum, and even more devices fill the gaps between, such as desktops, tablets, phones, and gaming consoles. In parallel, the density of pixels is increasing, too. Designing for a s
Luke Wroblewski wrote a blog entry that’s been rattling around in my head for a couple days now. In it, he raises some concerns he has about responsive design’s “over-reliance” on screen width. Go check it out, if you’re interested, but I’ll excerpt a bit: So if adapting to different screen sizes can have that kind of positive impact for a business, what’s the risk? As the kinds of devices people
このシリーズは Web Design101（WD101）と名付けて、ウェブデザインをより深く理解するための最初の一歩になる知識やノウハウをコラム形式で紹介していきます。 Webは見た目のコントロールがきかない モニターの外をデザインするのが大半である Webは寛容性をデザインする場である Webのデザインは枠のない世界である Webデザインであるもの、そうでないもの WD101: 画面ではなく部品から始めてみよう あなたはPC脳ですか？ 「PC脳」とは、私が UI やデザインの講座をするときに、よく使っているフレーズです。 従来は、ノートパソコンやデスクトップパソコンが Web 接続可能な主力デバイスでした。しかし、今は徐々に台数が減り続けており、代わりにスマートフォンやタブレットといったデバイスの台数が伸びてきています。さらに、パソコンの次に買う 2 台目のデバイスとしてではなく、パソコ
ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/234/room ーーーーーーーーーーーーーーーーーーーーーーー
タッチ UI のデザインで難しいのは、表層的な部分だけを設計すれば良いものになるわけではないという点です。技術もきちんと理解することで、Web なら Web らしい、アプリならアプリらしいデザインになります。表層的な部分から入ると、見た目は良いけど使い難くなったり、「なんとなく違う」という声に繋がることもあります。 だからといって、絵を描きながら UI を模索することを否定しているわけではありません。しかしながら絵を描く過程があったとしても、人がデバイスとどのように関わるのかを理解していることが前提になります。人はどのように UI に触れて、どのようなフィードバック（アウトプット）を期待しているのでしょうか。 タッチデバイスにある新しい挑戦 多くの方がタッチデバイスを扱うようになって数年経ちますが、今はもう画面に触れるだけが唯一の方法ではありません。人とデバイスの関係はより親密になったと同
New Layouts for the Multi-Device Web by Luke Wroblewski May 13, 2013 Most Web page layouts rely on design patterns created for laptop and desktop computers equipped with a mouse and keyboard. As the variety of devices being used to access the Web has grown, these patterns haven’t been keeping up. Designing for today’s Web means considering single-handed thumb use on smartphones, two handed touch i
Data Monday: Impact of Responsive Designs by Luke Wroblewski February 25, 2013 As people continue to use an ever increasing number of devices to get online, there's no shortage of companies exploring multi-device solutions for the Web. Some are even sharing data about the impact of their new responsive designs and the numbers look good enough to get even more organizations on board. Time Inc. Resp
日本Webデザイナーズ協会、株式会社インヴォーグ共催のセミナー「JWSDA×IN VOGUE スマフォで遊ぼ！インヴォーグ流スマートフォンソリューション」の講演スライドです。Read less
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
