レスポンシブWebデザインのブレークポイント調査
iPhone、iPadを基準にした数値が目立ちます。 レイアウトをPC、タブレット、モバイルで変更すると考えた時に、 代表的なデバイスでありユーザー数も多いiPhone、iPadが基準になるのも自然な流れかも知れません。 しかし、例えばブレークポイントをiPad基準にした768pxにすると、 幾つかのAndroidタブレットは800pxなのでこれらのデバイスにはタブレット用のレイアウトが適用されません。 ブレークポイントの数 少ないサイトは1〜多いところでは十数のブレークポイントを設けてるサイトもあります。 ただし、多く設定してるサイトもその全てでレイアウトが大きく変化する訳ではなく、 ごく一部のコンテンツのみ調整するといった使い方をしています。 例えば下記のサイトでは1300pxを境に境界線(.splitter)のみスタイルが変わります。 Remodelista: Sourcebook
「Webデザイン」とはなにか？ザックリ考えてみた（2013年）
「Webデザイン」について今の自分が考えてることを記録として書きました。去年に続き二回目です。タイトルに2013年が入ってるのは時間と共にwebのあり方や自分の考えも変わっていくからです。 はじめに このテーマを毎年恒例にしようとしてたのですが、早くも2回めで躓きそうになりました…。 「Webデザイン」とはなにか？じっくり考えてみた（2012年） 内容は「Webデザイン」の範疇を超えてるのですが、前回と同じタイトルにしてます。ただし、年末年始バタバタしてて時間掛けて考えることができなかったので、”じっくり”を”ザックリ”に変更してます。 また、この記事は2012年の総括や2013年のトレンドではなく、制作者の立場からWebについて今の自分が思ってることをつらつらと書いてます。なので、異なる意見があって当然だと思ってます。 読んでくれた方が「webデザイン」について考える一つのきっかけになっ
Webサイト制作でつまずきがちな解像度に関わるあれこれ │ Design Spice
アプローチ方法は違うものの、このdipと先程のデバイスピクセル比はほぼ同じ目的を持った機能です。 参考：Androidレイアウトの単位 – dpについて掘り下げる – アンテナ立てて viewport 仮想的なウインドウサイズです。 viewportがないと仮定した場合、デバイス幅320pxのiPhoneでインターネットにアクセスした時のウインドウサイズは320ピクセルとなり、通常のサイトを閲覧するには不便です。 そこで仮想的に大きいウインドウサイズとすることで、通常のサイトでもひと目で情報が見え、閲覧性や操作性を高まります。 viewportのデフォルト値は980ピクセルです。 （※iPhoneは980ピクセルで間違いないのですが全てのスマホで980ピクセルでしょうか？ 情報が見つからなかったので知ってる方は教えてください） また、viewportの数値はサイト側で指定できます。 スマホ
私がWebサイトの配色を決める時の流れ
ここで得た言葉を元に配色を組み立てていくことになるので重要な部分です。 伝えたいイメージは多くの場合、「明るい」「可愛い」「落ち着いた」などの形容詞で表現されることが多いです。 ただ、言葉から連想されるものは人により誤差がありますので、 参考となるサイトや、商品など具体的にイメージしてるものも挙げてもらうと良いです。 下記はGoogleの画像検索「高級」の結果です。人によって抱くイメージは様々です。 「○○のような高級感」と具体的に伝えてもらうと良いです。 2.調査 競合となる他社サイトの配色を調査し、それらと同じような配色になることは避けます。 ただし同業の全てのサイトと被らないようにするのは無理があるので、 商圏内で競合となる他社のみを比較対象とします。 また、既にクライアントが名刺やパンフレット、フライヤー、ノベルティやなどを制作していたら見せてもらったり、 店舗であれば外観・内装の
web制作者が印刷物を制作するときにチェックしたい10項目
Webも印刷物も同じ制作物として考えられがちですが、必要な知識は全く異なります。 自分の経験も通して印刷物の制作時に気を付けたいポイントをまとめました。 Webの制作をしてると一緒に印刷物の制作も頼まれることがあります。 しかしWebも印刷物も同じ制作物として考えられがちですが、必要な知識は全く異なります。 自分の経験も通して印刷物の制作時に気を付けたいポイントをまとめました。 小規模の制作物が主な対象です。 納期の確認 用紙の選択 仕上がりサイズ 使用する色 色校正 印刷の種類 加工 使用する画像 データチェック 見積り 1.納期の確認 個人的に一番か二番目に重要視してます。 僕の仕事がたまたまそうなのか分かりませんが印刷物はタイトな納期が多いです。 直前まで自分で作業できるWebと違って、 印刷物の制作には当然ながら印刷の工程があります。 ここは外部に依頼する工程なので調整が難しい部分
Web制作者は知っておきたいwebサイトのレイアウト7選 │ Design Spice
レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。 レスポンシブwebデザイン エラスティックレイアウト リキッドレイアウト フレキシブルレイアウト 固定幅レイアウト グリッドレイアウト 可変グリッドレイアウト レスポンシブwebデザイン(Responsive Web Design) PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、 ディスプレイの幅に合わせてデザインを最適化する方法。 CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更します。 メリット 一つのソースで複数デバイスに対応できるのでメンテナンスが容易です。 また今後デバイスの種類が増えてもそれに対応できます。 それぞれのデバイスに合わせた形で調整できるのでユーザーエクスペリエンスも高くなります。 デメリッ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
