choco https://ameblo.jp/starnight7/ Design,Photo ja スイススタイル スイスタイポグラフィ、インターナショナルスタイルと呼ばれる

●エミールルダー
スイスのタイポグラファー。アーミンホフマンと共に
バーゼル造形大学の設立に関わり、スイススタイルの一翼を担った。
レイアウトにおける空間コントロールの概念は、
現在でもウォルガングワインガルト、ヘルムートシュミットなどの
教え子に受け継がれている。
余白、空間を大事にする。

●ノイエグラフィーク
ヨゼフミューラー＝ブロックマン、カルロLビヴァレらを中心に
1958年からデザインジャーナルから発行された。
グリッドシステムを基盤とした機能的な美を追求。

●ヨゼフミューラー＝ブロックマン
スイスのグラフィックデザイナー。
「スイススタイル」の代表的なデザイナー。
タイポグラフィを素材として活躍し、グリッドを活用するグリッドシステムを確立した。

●オトルアイヒャー
ルフトハンザ航空のCIを作った人。

●ウィムクロウェル
オランダ人グラフィックデザイナー。
アムステルダム市立美術館のポスターなど。
電話帳、切手など。細かいグリッド。

●ヘルムートシュミット
オーストリア生まれのタイポグラファー。
1960年代にスイスのバーゼルでエミールルダーに師事する。
その後、バーゼル、ストックホルム、西ベルリン、モントリオール、バンクーバー、
デュッセルドルフなどを経て、現在は大阪に拠点を置いて活動している。
空間美にこだわっている。東洋に魅せられた。
エクシール、マキアージュ、イプサ、誠文堂新光社アイデアのロゴなど作成。


おすすめサイト　FFFFOUND http://ffffound.com/ ]]> https://ameblo.jp/starnight7/entry-10785649435.html Mon, 31 Jan 2011 16:22:35 +0900 和字書体 $WEBメモ

☆明朝体
中国では宋朝体がよく使われる。
なぜ日本では明朝体がよく使われるのか？
上海「美華書館」で使われていたから。
ローマン体と明朝体が似ていたから。
昔はつなげて書かれていたが、金属活版が生まれてからバラバラの文字が生まれた。

☆ゴシック体
サンセリフに似せて作られた。
]]> https://ameblo.jp/starnight7/entry-10778394540.html Mon, 24 Jan 2011 17:24:30 +0900 サンセリフ体 $WEBメモ

☆Gill Sans
ファミマとかに使用されている。

☆FUTURA
幾何学的要素が強い。
トイストーリーとかに使用されている。

☆Optima
女性的。碑文的なエレガントさとシンプルさを兼ね備えた独特の美しいフォルム。

☆Helvetica
世界で最も使用されている書体。

☆Univers
これも　よく使用されている書体。
]]> https://ameblo.jp/starnight7/entry-10778361518.html Mon, 24 Jan 2011 17:02:43 +0900 ローマン体 $WEBメモ

●１５世紀：ヴェネチアンローマン
☆ニコラジェンソン（イタリア）
Adobe Jenson
手書き風。
eが斜め向いてる。
格調高いブランドとかで使用する。

●１６世紀：オールドローマン
☆ギャラモン（フランス、イタリア、オランダ）
Adobe Garamond
国柄がある、どんどん国風にかわっていく。
ルネッサンス文化。
ちょっと柔らかい雰囲気。
イタリアから流れたきたものをフランス風にアレンジした書体。
クロードギャラモンさんが作ったやつが死後ばらまかれてごっちゃになった。
Adobeががんばって見つけて復刻したのがこの書体。

☆トラジャン
TRAjan
格調高い感じ。
☆サボン
ヤンチヒョルトさんがオリジナルで作った書体。
LINOTYPE社が売っている。高価。
☆キャズロン
ウィリアムキャズロンさん（イギリス）によって作られた。
アメリカでヒット。たくましい感じ。迷ったらキャズロンで組め！

●１７世紀：トランジショナルローマン
印刷技術が向上したため、だんだんシャープになっていく。
Baskerville
ジョンバスカーヴィルさんによって作られた。
水平垂直がより、まっすぐに。円は正円に近くなっている。

●１８世紀；モダンローマン
機械の性能が上がったので、ストロークの太さに強弱が現れる。
☆Bdoni
☆Didot
ファッション誌、女性誌によく使われる。
]]> https://ameblo.jp/starnight7/entry-10778339830.html Mon, 24 Jan 2011 16:23:54 +0900 【CSS3】透明度 /*透過*/
background-color:#fff; /*IE用*/

background:rgba( 255, 255, 255, 0.5);
behavior: url(PIE.htc);　/*IE用*/


※カンマ（ , ）区切りにした3つの数値でRGBの色を指定。
そして4つ目の値に、数値で透明度を指定。
RGBの色は0-255、または、0%-100%で指定。
透明度は、0（完全に透明）～1（完全に不透明）の数値で指定。
rgba(赤,緑,青,透明度);

]]> https://ameblo.jp/starnight7/entry-10769007936.html Sat, 15 Jan 2011 13:52:01 +0900 レスポンシブなデザインの課題 すべての環境に同じファイルがDLされることになってしまうのが問題。

スマートフォンでは必要以上に大きなファイルをDLすることになってしまったりする。

また、スマートフォン閲覧用に位置情報機能を組み込んだ場合、

デスクトップ閲覧には不要なHTMLやJavaScriptをDLすることになる。

メディアクエリは、表示をコントロールすることはできても、ファイルのDLを制御できない。

個々のデバイスごとつくり込む場合は、この点への考慮が必要になる。


デバイスごとの最適化を追求するなら、個別にHTMLを作成したほうが、

よりユーザーの満足度、ユーザーエクスペリエンスを向上させられる可能性は高い。

しかし制作/運用コスト、そして今後ますます増加するであろうデバイスの種類を考えると、

「レスポンシブなデザイン」のように複数のデバイスで

HTMLを共有するというアプローチの重要性は高まりそうである。


]]> https://ameblo.jp/starnight7/entry-10761118403.html Fri, 07 Jan 2011 18:02:04 +0900 DW5を使用したワークフロー 「レスポンシブなデザイン」では、「%」や「em」のような、相対値による指定を多用する。

たとえば、img要素のwidthをピクセル数で指定するかわりに100%と相対値で設定することによって

画像が含まれている領域に合わせて大きさが変わる。

もちろん全て相対値指定する必要はない。

ボーダーやパディングをピクセル指定する場合は、box-sizingにborder-boxを指定すれば

widthに100%を設定してもデザインが崩れるのを防げる。


DW5の最新アップデートでは、正式にHTML5/CSS3を利用した開発ワークフローがサポートされた。

その１つである「マルチスクリーンプレビュー」は、メディアクエリに対応すべく追加された機能。

これは、同時に３種類の画面サイズをそれぞれ異なるスタイルが適用された状態で確認が可能。



]]> https://ameblo.jp/starnight7/entry-10761113408.html Fri, 07 Jan 2011 17:52:22 +0900 レスポンシブなデザインを実際に行う例 body―header領域（ページタイトルやロゴを表示する領域）

　　　―content領域（コンテンツを表示する領域）


content―main領域（主要な情報を表示、レイアウトが変わっても常にページ左上に表示）

　　　　　―sub領域（３つのsection要素から構成され、各sectionはカラム数に応じてその配置を変える。）


各section領域の位置は、使用するCSSによって決定される。

そして、どのCSSを使用するかは、HTML内に記述されたメディアクエリによって選択される。

用意されているCSSは、デスクトップ用、タブレット用、スマートフォン用の３種類。

デスクトップ用CSSだけはfloat属性を使って複数のカラムが表示される。


●CSS

<link href="css/iphone.css" rel="stylesheet" type="text/css" media="only screen and(min-width:0px)and(max-width:320px)">

<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and(min-width:321px)and(max-width:910px)">

<link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and(min-width:911p)">


この場合のCSS指定。0～320ピクセル、321～920ピクセル、921ピクセル以上という画面幅を条件として、

メディアクエリによって３種類のCSSファイルから選択される。


デスクトップ用のCSSにはさらにメディアクエリが含まれていて、

ブラウザの幅によっては３つのsection領域をすべて横に並べる４カラム表示まで対応している。

メディアクエリをサポートしていないブラウザでは、ウィンドウ幅によらず２カラムのレイアウトで表示される。


メディアクエリによってCSSを切り替えることで、

レイアウト以外の最適化も可能になっている。

たとえば、1カラム表示でsub領域がmain領域の下に配置されるときは、

sub領域にもmain領域と同様のボーダーや影が表示される。

また、スマートフォン用のCSSをでは、見やすさを考慮して大きめのフォントが指定されている。

この他に、タッチデバイスの最適化を行うことも可能。



]]> https://ameblo.jp/starnight7/entry-10761103425.html Fri, 07 Jan 2011 17:31:57 +0900 レスポンシブなデザイン １つのHTMLファイルを、スマートフォンからデスクトップまで、さまざまな種類の画面に積極的に適応させるという新しいデザイン手法。


表示幅に応じて、カラムの幅、コンテンツのレイアウトも動的に変化する。


基本となる要素

１：カラムの幅やイメージの大きさなどを相対値で指定すること。

⇒これにより、表示するウィンドウの幅に合わせて、カラムの幅やカラム内のコンテンツの大きさが決定されるようになる。

⇒しかしこれだけでは、ウィンドウの幅が大きく変わった場合の対応が難しい。320ピクセル幅の画面と、1024ピクセル幅の画面ではどちらかが使いにくくなってしまう。


２：メディアクエリ

⇒メディアクエリを使用してウィンドウ幅に応じてCSSを切り替えれば、カラム数をウィンドウ幅に応じて増減させることが出来る。


このように、小さな変更には相対値を用いたレイアウトのもつ流動性で対応し、

大きな変化にはCSSの切り替えによるレイアウトルール自体の変更で対応する、というのが

「レスポンシブなデザイン」の考え方。

カラム数が動的に変わるため、コンテンツを再配置可能なモジュール構造として設計する必要がある。

したがって、幅や位置が固定のHTMLページと比較して、ビジュアルデザインを行う際の制限が多くなることが注意点。

デザイナーには、基本的なCSS3のレイアウト機能の知識と、

モジュールの並べ替えとして実現されるデザインへの洞察力が求められることになる。

]]> https://ameblo.jp/starnight7/entry-10761084895.html Fri, 07 Jan 2011 17:14:40 +0900 メディアクエリ HTML5についかされた新しい機能の１つ。

メディタイプの構文を拡張し、

メディア属性に関する条件を記述できるようにしたもの。

たとえば、表示幅に応じてCSSファイルを切り替えることが可能。


アドビシステムズhttp://adobe-html5.jp/

アドビシステムズのHTML5/CSS3特設サイト。

ブラウザ幅に応じて画面が３カラムから１カラムへと変化するが、

使用されているHTMLは同じもの。

サンプルのソースが提供されている。

]]> https://ameblo.jp/starnight7/entry-10761070143.html Fri, 07 Jan 2011 17:10:58 +0900