Webデザイナー（私）によるタイポグラフィーレイアウトの注意書き
私は DTP デザインが苦手です ...。でもときどきお客さんから、フライヤーとかポスター、名刺なんかの紙のデザインを頼まれます...。そこでもっと勉強しなくちゃいけないなーと感じていたのが、タイポグラフィーについてのこと。今回はタイポグラフィーとそのレイアウトについて学んだことをまとめてみました。 以前グラフィックデザインをしている先輩に、グリッドシステムや揃えるだけがデザインじゃないし、もっとタイポグラフィーやレイアウトのことを勉強しなさいと言われました …。私は普段、Webデザインしかしていないんですけど、ときどきフライヤーやポスターのデザインを、ついで仕事のような形で頼まれる事があります …。 でも、Webデザインしかしてこなかった私は、紙媒体 – DTP デザインが苦手です …。ちょうど 1年くらい前にも同じような記事、Webデザイナー（私）によるDTPデザイン注意書き：Webと
地味に使えるCSS小技のメモ&サンプル集
cssの小技的なテクニックが便利なので好きなん ですが、cssそのものが嫌いで覚えられないので カンペ的な記事を作ることにしました。便利な小技 は沢山あるんですが、特に自分が良く使いそうな Tipsをメモします。既に出回っている情報ばかりで 特に目新しい手法はありませんので何も期待でき ないです。 というわけで特にテーマも一貫性も無くて、ただ便利ってだけです。推奨されない方法もあるかもしれませんが、僕は細かいこと気にしませんのでそんな感じです。 内容も既出なのでお詳しい方にはお役に立てないですが、僕の個人的なメモなので適当に流して頂けると幸いです。 floatで並べたリストのセンタリング Sample01 コード.centered { position: relative; overflow: hidden; } .centered ul { position: relative; lef
DreamweaverCS5のテンプレートをHTML5にすると文字化けする
DreamweaverCS5のテンプレートを使いHTML5を構築しようとした時、 テンプレートを反映したサイトが文字化けを起こす場合があります。 HTMLの文字エンコーディング指定がUTF8の時に起こります。 HTML5では文字エンコーディング指定は、 <meta charset="UTF-8" /> と省略して記述できます。 どうやらこの部分がDeamweaverで正確に解釈されてないようで、 テンプレートを反映したファイルの文字コードが全てShift-JISになってしまうのが文字化けの原因です。 （Dreamweaver上では正常に表示されてますが、テキストエディタなどでファイルを開くと文字エンコーディングがShift-JISになってるのが確認できます） とりあえず文字エンコーディング指定を下記の様にHTML 4と同じ記述にすればこの問題は回避されますが、 Adobeには早めに対応して
HTML5・CSS3時代のweb制作コンセプト
HTML5・CSS3対応のブラウザが増えてきて、制作のコンセプトも変化してきました。 プログレッシブエンハンスメントなどユーザーのブラウザ環境に焦点を置いた制作コンセプトをまとめました。 足りない知識を埋めながら書いたので一部認識が間違ってる箇所があるかも知れませんが、その場合はご指摘頂けると助かります。 Progressive Enhancement Graceful Degradation Polyfill Progressive Enhancement(プログレッシブエンハンスメント) どのブラウザでも基本的な水準のユーザーエクスペリエンスを提供をし、 新しく高水準のブラウザにはCSS3やjsなどでよりリッチなデザインや機能を提供するという考えです。 またProgressive Enhancementには下記の原則があります。 基本的な内容は、すべてのブラウザでアクセス可能である必要
Web制作者は知っておきたいwebサイトのレイアウト7選 │ Design Spice
レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。 レスポンシブwebデザイン エラスティックレイアウト リキッドレイアウト フレキシブルレイアウト 固定幅レイアウト グリッドレイアウト 可変グリッドレイアウト レスポンシブwebデザイン(Responsive Web Design) PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、 ディスプレイの幅に合わせてデザインを最適化する方法。 CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更します。 メリット 一つのソースで複数デバイスに対応できるのでメンテナンスが容易です。 また今後デバイスの種類が増えてもそれに対応できます。 それぞれのデバイスに合わせた形で調整できるのでユーザーエクスペリエンスも高くなります。 デメリッ
素人っぽいデザインから脱却するための12のデザインチップス | webox blog
クオリティを上げるためにはちょっとした「こだわり」がとても大事です。 定期的に話題になるネタで恐縮ですが、素人っぽいデザインにならないように個人的によく使ってる小技をまとめました。 上のものほど、簡単で多くのデザインに使える小技になります。 1pxのボーダーを使う 1pxの効果を使うのと使わないのでは、デザインの質に大きな違いが生まれます。 ある意味Webデザインでは一番重要な要素かもしれません。 定番です。たった1pxのボーダーをつけるだけでシャープな印象になります。 ただ塗りつぶしただけ、グラデーションを入れただけのボタンでは、のっぺりとした感じになりやすいですが、1pxのボーダーを上部に入れるだけでシャープな立体を表現できます。 正確には1pxでなく2pxですが、こうして黒系のボーダーと白系のボーダーを並べることで、明確にかつシャープに仕切りを表現できます。 1pxのドロップシャ
MdN Design｜総合情報サイト
Node.jsのインストールと 下準備 Node.js のインストールは、UbuntusやMacを利用するのが簡単だ【4】。ちなみに今回はMacとパッケージ管理システムMacPortsを利用してインストールしている。MacPorts のインストールは、Web サイトからpkg 形式のインストーラが配布されているので参照して欲しい【5】。 Node.jsには開発を便利にするパッケ ージが多数配布されている。これらの一括管理には、パッケージ管理システムnpm(node package manager)【6】を使うとよい。npmはMacPortsではインストールできないため、curlを利用してインストールする。curlのインストールはMacPortsで可能だ【7】【8】。 Node.jsでWebSocketを利用したい場合、Socket.ioが便利だ【9】。Node.jsのパッケージとして配布さ
フワフワの泡に色を流し込んで早回しにしたら、うごめくワンダフルな新感覚映像！！ : カラパイア
洗剤を攪拌させたときにできる泡に、黒い磁性流体を流しいれてみたら、あらやだ不思議な新感覚、泡の間を黒く染め上げ謎生物が誕生しそうな気配。後半は食紅なんかも流しこんでいるので鮮やかさひとしお。
Mac初心者には参考になるかもしれないMac作業環境晒し｜男子ハック
@JUNP_Nです。新しいMacBookAirが発売されたら購入すると心に決めているのですが、次のMacは移行アシスタントを使わないでゼロから環境を作ろうと思っています。ということで現在のMac環境を晒しつつまとめてみようと思います。 Spaceseは縦3×横3の9画面を用意 Spacesを使い、それぞれの画面に役割分担をさせています。基本ですね。 僕は縦3×横3の合計9画面を用意しています。画面ごとの役割分担は以下。 ファイル操作、デスクトップ表示用メールクライアント（Sparrow）専用iTunes専用Evernote専用ブラウザ（Chrome）専用編集作業専用（Illustrator、Skitchなど）Twitter専用（Echofon、Twitter）MarsEdit専用Skype専用 一番利用頻度が高いのが「5」のブラウザ画面です。ここを起点に利用頻度が多い画面にすぐ変移できるよ
ユーザに自分ゴト化してもらうための3つの方法 (ユーザビリティ実践メモ)
今回の実践メモでは、WEBサイト上でユーザの購買意欲を喚起するための方法についてご紹介します。 WEBサイトを見ているユーザの購買意欲を喚起するためには、ユーザに商品の購入を『自分ゴト化』してもらうことが重要であることが、これまでの弊社のユーザ行動観察調査から明らかになっています。 本稿では、WEBサイト上での情報提供で、ユーザに『自分ゴト化』してもらうための3つ紹介いたします。 (1)「こんな人にオススメ」という情報を示す 例えば、以下の表現を比べてみてください。 上の例だと、これらの商品が自分に合っているのかどうかをユーザは判断することができません。 しかし、下のように「こんな人にオススメ」という情報を提示すれば、ユーザに「この商品は自分の状況に合っている」と認識させることができ、自分ゴト化してもらうことができます。 (2)商品価格をユーザに実感させる いくら自分の状況に合った商品があ
Diigolet | Diigo
Diigolet is not as feature-rich as the Diigo toolbar, but it can be set-up by simple drag-and-drop - no download or installation needed, and it works for all major browsers. Much more powerful than bookmarklets offered by other social bookmarking sites, Diigolet is a "super bookmarklet" that allows you to highlight and add sticky-notes, in addition to simple bookmarking. You can get started by wat
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ワイヤーフレームをつくる時に押さえておきたいポイント | Design Spice
Webデザイン超基本のお作法50選 | デザインってオモシロイ -MdN Design Interactive-
Webデザインとグラフィックの総合情報サイト - MdN Interactive - Webデザイン超基本のお作法50選
not found
Photoshop VIP ☞ デザインアイデア爆発、25個のユニークなWebサイト用レイアウトまとめ