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と違って、 印刷物の制作には当然ながら印刷の工程があります。 ここは外部に依頼する工程なので調整が難しい部分
viewportの動作検証（iPhoneのみ）
描写のプロセス initial-scaleを指定した場合 初期値補充：viewport width = 0（viewport height = 0）（それぞれ指定がない場合） 表示域を算出：表示域 = ウィンドウサイズ / initial-scale ドキュメントサイズ決定：表示域・コンテンツサイズ・viewportの中で最大の値 描写：決定したドキュメントサイズとinitial-scaleで描写 initial-scaleを指定しない場合 初期値補充：viewport width = 980px, viewport height = 1091px（それぞれ指定がない場合） ドキュメントサイズ決定：コンテンツとviewportで大きい方の値 倍率算出：ドキュメントがウィンドウ内にぴったり収まるようにinitial-scaleを計算（縦と横で大きい方のinitial-scaleを適用） 描写
レスポンシブwebデザインで制作する時のポイント
先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。 とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。 （一部の図はセミナーの資料を元に作成してます。） 始めに：スマートフォンサイト制作の選択肢 スマートフォンサイトを制作するには幾つかの方法があります。 アプリ 独自系 スクラッチ（0からスマートフォンサイト用に構築） jQuely mobileを使用 流用系 現在のデザインをほぼ流用、調整のみ レスポンシブ・デザイン どの方法にもメリットデメリットはあり、どれが最適かは サイトのコンセプトや規模、予算など複合的に考えて選択する必要があります。 今回のエントリーではレスポンシブ・デザインのみにふれます。 レスポンシブwebデザ
Facebook・Twitterなどソーシャルボタン設置方法まとめ │ Design Spice
twitter、facebook、google+1、evernote、tumblr、はてブ、mixiなど、各ソーシャルメディアやブックマークに共有するボタン設置方法をまとめてみました。 このブログはwordpressで構築しているのでプラグインを使用すれば簡単なのですが、他サイトなどにも使うことを想定した設置方法です。 備忘録エントリー。 twitter ツイートボタン facebook いいねボタン google+1ボタン evernote サイトメモリーボタン tumblr 共有ボタン はてなブックマーク mixiチェックボタン twitter ツイートボタン 1.コード取得 下記リンク先でツイートボタンのソースコードが取得できます。 Twitter / ツイートボタン ボタン ボタンの種類を選びます。 ツイート内テキスト ツイートに含まれるテキストを選択します。 ボタンが表示されるペ
CSSのセレクタを活用しよう | Design Spice
:focus擬似クラス 要素がフォーカスされた際のスタイルを指定します。 フォームの入力欄にカーソルを合わせてテキスト入力できるようになった状態などです。 input:focus{ background-color:#FF9; } :lang擬似クラス 特定の言語を指定されている要素にスタイルを適用します。 言語コードには、ja（日本語）、en（英語）、fr（フランス語）、zh（中国語）などがあります。 p:lang(en){ color:#C00; } :first-child擬似クラス ある要素内で最初に現れる子要素にスタイルを適用します。 li:first-child{ color:#C00; } :first-line擬似要素 ブロックレベル要素の最初の行にスタイルを適用します。 ※インライン要素には適用できません。 #firstLine p:first-line{ color:#
私がwebサイトのラフデザインを制作する時の流れ │ Design Spice
私がwebサイトのラフを作る時の流れを書いてみました。 独学で身に付けた方法であり、 一般的な方法ではないかも知れないことを予め断っておきます。 私にはやりやすい方法ですが、 他の人にとってはそうではないかもしれません… 本エントリーはラフデザインのみ注力するため、既にコンセプト、ターゲット、サイト構成などは決まった状態と仮定します。 （※本文中のショートカットキーは全てMacの場合です） 希望デザインのヒアリング ※委託業務の場合です どんなデザインが希望かを先方にヒアリングします。 この時にできるだけ、クライアントのイメージを明確にするため 抽象的でも良いので沢山言葉を貰います。 明るい、可愛い、ポップ、カッコいい、シンプル、落ち着いた…etc 具体的にデザイン参考にしたいサイトがあるのなら聞いておきます。 また頂いた言葉と自分のイメージのギャップを埋めておきます。 ”シンプル”と言う
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://design-spice.com/2012/06/13/responsive-web-design-image/