junta1999のブックマーク - はてなブックマーク

Webサイト制作でつまずきがちな解像度に関わるあれこれ │ Design Spice

アプローチ方法は違うものの、このdipと先程のデバイスピクセル比はほぼ同じ目的を持った機能です。参考：Androidレイアウトの単位 – dpについて掘り下げる – アンテナ立てて viewport 仮想的なウインドウサイズです。 viewportがないと仮定した場合、デバイス幅320pxのiPhoneでインターネットにアクセスした時のウインドウサイズは320ピクセルとなり、通常のサイトを閲覧するには不便です。そこで仮想的に大きいウインドウサイズとすることで、通常のサイトでもひと目で情報が見え、閲覧性や操作性を高まります。 viewportのデフォルト値は980ピクセルです。（※iPhoneは980ピクセルで間違いないのですが全てのスマホで980ピクセルでしょうか？情報が見つからなかったので知ってる方は教えてください）また、viewportの数値はサイト側で指定できます。スマホ

junta1999 2012/09/05

リンク

Photoshopで理論的に配色はできないものか検証してみた

最近は配色を作れるジェネレータや配色をシェアするサイトが多数あり、簡単に配色を作ることができます。ただ、そういうのに頼らずにもっとPhotoshopだけで理論的にできないものかと思い検証してみました。動機配色を作れるツールっていまいち使いこなせてないし、自分がイメージしてる配色をPhotoshopで理論的に作れたら楽だなと思って。結論最初に結論を述べます。 Photoshopで色相を使った配色は基本的には難しいです。（できなくはないが非常に手間がかかる）彩度・明度を使った配色は簡単にできる。また、トーンを使った配色ならそれなりにであればできる。という結論になりました。 Photoshopの表色系の落とし穴色相を順序立てて円環にして並べたものを色相環と言い、色相環の反対の位置が補色となります。つまり基準となる色に180°足した色が補色になります。ところが下記のようにPhot

junta1999 2012/07/10

リンク

https://design-spice.com/2012/06/13/responsive-web-design-image/

junta1999 2012/06/15

リンク

無料のベクター素材を提供しているサイト40選

先日の「無料でphotoshopのファイル・ブラシ・シェイプなどの素材を提供しているサイト45選」に続き、ベクター素材を提供しているサイトのまとめです。やはり個人的な整理のためのまとめですが共有します。先日の無料でphotoshopのファイル・ブラシ・シェイプなどの素材を提供しているサイト45に続き、ベクター素材を提供しているサイトのまとめです。やはり個人的な整理のためのまとめですが共有します。はじめに全てを網羅するのは逆に手間だと思うので、この中から自分のお気に入りや使いやすいサイトを選んでそれを中心に利用することになると思います。また、サイトによってはphotoshopの素材とベクター素材を扱ってるサイトもあり、無料でphotoshopのファイル・ブラシ・シェイプなどの素材を提供しているサイト45で取り上げたサイトはこちらには載せてません。上記エントリーのサイト説明に

junta1999 2012/02/26

リンク

Web制作者は知っておきたいwebサイトのレイアウト7選 │ Design Spice

レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。レスポンシブwebデザインエラスティックレイアウトリキッドレイアウトフレキシブルレイアウト固定幅レイアウトグリッドレイアウト可変グリッドレイアウトレスポンシブwebデザイン(Responsive Web Design) PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、ディスプレイの幅に合わせてデザインを最適化する方法。 CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更します。メリット一つのソースで複数デバイスに対応できるのでメンテナンスが容易です。また今後デバイスの種類が増えてもそれに対応できます。それぞれのデバイスに合わせた形で調整できるのでユーザーエクスペリエンスも高くなります。デメリッ

junta1999 2011/09/01

リンク

私がwebサイトのラフデザインを制作する時の流れ │ Design Spice

私がwebサイトのラフを作る時の流れを書いてみました。独学で身に付けた方法であり、一般的な方法ではないかも知れないことを予め断っておきます。私にはやりやすい方法ですが、他の人にとってはそうではないかもしれません… 本エントリーはラフデザインのみ注力するため、既にコンセプト、ターゲット、サイト構成などは決まった状態と仮定します。（※本文中のショートカットキーは全てMacの場合です）希望デザインのヒアリング ※委託業務の場合ですどんなデザインが希望かを先方にヒアリングします。この時にできるだけ、クライアントのイメージを明確にするため抽象的でも良いので沢山言葉を貰います。明るい、可愛い、ポップ、カッコいい、シンプル、落ち着いた…etc 具体的にデザイン参考にしたいサイトがあるのなら聞いておきます。また頂いた言葉と自分のイメージのギャップを埋めておきます。 ”シンプル”と言う