Webサイト制作でつまずきがちな解像度に関わるあれこれ │ Design Spice
アプローチ方法は違うものの、このdipと先程のデバイスピクセル比はほぼ同じ目的を持った機能です。 参考：Androidレイアウトの単位 – dpについて掘り下げる – アンテナ立てて viewport 仮想的なウインドウサイズです。 viewportがないと仮定した場合、デバイス幅320pxのiPhoneでインターネットにアクセスした時のウインドウサイズは320ピクセルとなり、通常のサイトを閲覧するには不便です。 そこで仮想的に大きいウインドウサイズとすることで、通常のサイトでもひと目で情報が見え、閲覧性や操作性を高まります。 viewportのデフォルト値は980ピクセルです。 （※iPhoneは980ピクセルで間違いないのですが全てのスマホで980ピクセルでしょうか？ 情報が見つからなかったので知ってる方は教えてください） また、viewportの数値はサイト側で指定できます。 スマホ
私がWebサイトの配色を決める時の流れ
ここで得た言葉を元に配色を組み立てていくことになるので重要な部分です。 伝えたいイメージは多くの場合、「明るい」「可愛い」「落ち着いた」などの形容詞で表現されることが多いです。 ただ、言葉から連想されるものは人により誤差がありますので、 参考となるサイトや、商品など具体的にイメージしてるものも挙げてもらうと良いです。 下記はGoogleの画像検索「高級」の結果です。人によって抱くイメージは様々です。 「○○のような高級感」と具体的に伝えてもらうと良いです。 2.調査 競合となる他社サイトの配色を調査し、それらと同じような配色になることは避けます。 ただし同業の全てのサイトと被らないようにするのは無理があるので、 商圏内で競合となる他社のみを比較対象とします。 また、既にクライアントが名刺やパンフレット、フライヤー、ノベルティやなどを制作していたら見せてもらったり、 店舗であれば外観・内装の
Web制作フローの再考とDesigning in the browser
多様化するwebサイト、増加するデバイスに適応していくために今までのWeb制作のワークフローも見直す必要があるのではないでしょうか。またその一つの手法としてDesigning in Browserについて書きました。 現在ではWebサイトも、インタラクティブなサイト、アプリのようなサイト、可変するサイトなど様々なスタイルが見られるようになってます。 また、Webを閲覧できる環境もPCからスマートフォン、タブレット、テレビ、カーナビなど増加し続けてます。 それに伴い今まで以上にテストケースが増えてきてます。 今までのような静的なデザインを作ってから開発、テストというWeb制作のワークフローでこの変化の流れに対応できてるのでしょうか。 まず静的なデザインはあくまでこのように見えるという仮説であり、 解像度やスクリーンサイズが異なれば見え方も変わってきます。 更にどのように動くのかまでは表現でき
Facebook・Twitterなどソーシャルボタン設置方法まとめ │ Design Spice
twitter、facebook、google+1、evernote、tumblr、はてブ、mixiなど、各ソーシャルメディアやブックマークに共有するボタン設置方法をまとめてみました。 このブログはwordpressで構築しているのでプラグインを使用すれば簡単なのですが、他サイトなどにも使うことを想定した設置方法です。 備忘録エントリー。 twitter ツイートボタン facebook いいねボタン google+1ボタン evernote サイトメモリーボタン tumblr 共有ボタン はてなブックマーク mixiチェックボタン twitter ツイートボタン 1.コード取得 下記リンク先でツイートボタンのソースコードが取得できます。 Twitter / ツイートボタン ボタン ボタンの種類を選びます。 ツイート内テキスト ツイートに含まれるテキストを選択します。 ボタンが表示されるペ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
