全ての人が知っておくべき 見やすい資料をつくるための9つの黄金テクニック - ひつじの雑記帳
スライドやポスターなどの資料作成において一番重要なものは「内容」です。しかし、それに並ぶくらい「デザイン・レイアウト」も重要となります。見づらいデザインのせいで、せっかく長時間かけて仕上げた資料が台無し...なんてことも十分にあり得ます。 あなたは読み手に優しい「見やすい資料」を作れているでしょうか？ 今回は、全ての人が知っておくべき見やすい資料をつくるための9つの黄金テクニックを紹介します。これから紹介することは資料作成だけでなく、Webデザインにも応用できるはずです。ブログやサイトを運営している方もぜひ参考にしてみてください。 スポンサードリンク 目線の動きを意識したZNの法則 矢印や番号を使うと尚良し 強弱をつけて読みやすくする 適度な余白・行間を持たせる 見えない線を常に意識する 彩度の高すぎる色彩は使わない 色が持つ意味を考えて使う 色が持つイメージの例 極端な大きさの文字を使っ
【Webデザイナー必読】PhotoshopやHTMLなどのスキルを劇的に上げられる記事まとめ30選
Webデザイナーとしてのキャリアを歩み始め1年目。基本的なスキルを学び、業務をひと通りこなせるようになったものの、先輩デザイナーと比べると、差を感じてしまうという方もいるのではないでしょうか？ Webデザイナーはクリエイター系の職種であるため、「センス」が重要視されるシーンが多いです。しかし、“学び”によってスキルアップできるのもまた事実。むしろ、テクノロジーの発展が著しい業界ということから、プロとして仕事を続けるのであれば学び続けなければならないのは宿命かもしれません。 そこで、今回は「Photoshopを使ったデザイン」や「HTMLなどの言語を使ったコーディング」、「Webデザイナーとしてインプットしておきたい情報」に関する30記事をご紹介します。 Photoshopなど、デザインに関する記事10選1.良いデザインって？技術を学ぶ前に知っておきたいデザイン・レイアウトの基本的なこと こ
clearfixでfloatを解除 | d-spica
clearfixでfloatを解除 2007-03-07 1 0 XHTML/CSS clear, CSS 枠や背景が消えたり，途中で切れたりしたことはありませんか。 floatした要素（ボックス）を含む親要素（ボックス）のborderやbackgroundが途中で切れてしまうことがあります。 左の例では，右側のメニューが終わったあたりで，左右にあるラインも切れています。 floatした要素の高さは親要素の高さに反映されない 分かりやすいようにXHTMLとCSSの例を書いてみましょう。 <div id="wrapper"> <div id="content"> <p>content</p> </div> <div id="menu"> <p>menu</p> </div> </div> #wrapper { width: 200px; border: solid 3px #999999;
Photoshopでウェブページのインターフェイスを作成するチュートリアルのまとめ
ブログやポートフォリオ、Eコマース、コーポレートサイトなどに、レトロ風、スタイリッシュ、クリーン、スリーク、背景に写真、イラストを使うなど、ウェブページのユーザーインターフェイスをPhotoshopで作成するチュートリアルを紹介します。
配色、デザイン、文章、写真、センスがないとあきらめる前に勉強しよう！｜Webpark
自分が作ったウェブサイトを見て、「センスないな」とへこむことはありませんか？ 私はよくあります。色使い、レイアウト、写真、文章などなど、どれをとってもセンスないなとへこんでいました。 けど、センスがないのではなく、単に基礎を勉強していないだけということに最近気づきました。センスはもっと高い次元の話でした。 ということで、センスを言い訳にしてしまいがちな分野の基礎を学べるすばらしい記事を集めました。この記事自体単なるまとめ記事ですが、できるだけ厳選し、読んでほしい順に並べました。皆さん、あきらめずに一緒に勉強しましょう。 配色 アクセントになる色を使うのが苦手で、同色系の色ばかり使ってしまうのですが、これらを読めば恐れずに使えそう。 色彩センスのいらない配色講座 ベースカラー、メインカラー、アクセントカラーに分類してどのような色を選ぶべきか分かりやすく解説してくれています。具体例もあって分か
ブラウザ上で複雑なレイアウトが作れる「Layzilla.com」:phpspot開発日誌
HTML layout generator - Layzilla.com ブラウザ上で複雑なレイアウトが作れる「Layzilla.com」 空白のキャンバスにボタンをポチポチ押していってドラッグ＆ドロップすることでレイアウトをどんどん組み立てられます。 レイアウトを配置した例。それぞれ、ふちをドラッグすればリサイズ可能 終わったらソースコードをジェネレート 次のようなそこそこ綺麗なHTMLが出力できます。 勿論、CSSも出力できます。 関連エントリ 複雑なCSSレイアウトをウェブ上で簡単に作成できる「The 1Kb CSS Grid」 レイアウト作成に役立つCSSグリッドレイアウトジェネレーター集
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
様々なCSSレイアウトをダウンロードできるサイトをまとめた「465+ Useful CSS Layouts for Download」
TOP > WebDesign > 様々なCSSレイアウトをダウンロードできるサイトをまとめた「465+ Useful CSS Layouts for Download」 WEBでは様々なデザインレイアウトがあり、クリエイティブで大きな差はできますが、基本のレイアウトはある程度決まっており、制作する上で、ベースとなるレイアウトテンプレートがあるだけで随分と楽になります。今日紹介するのは様々なCSSレイアウトをダウンロードできるサイトをまとめたエントリー「465+ Useful CSS Layouts for Download」です。 Nice and Free CSS Templates/Layouts by My Celly 基本的な1カラム、2カラム、3カラムといったベーシックなものから、シンプルなものまで様々なCSSテンプレートがダウンロード可能です。今日は紹介されている中か
Web制作者は知っておきたいwebサイトのレイアウト7選 │ Design Spice
レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。 レスポンシブwebデザイン エラスティックレイアウト リキッドレイアウト フレキシブルレイアウト 固定幅レイアウト グリッドレイアウト 可変グリッドレイアウト レスポンシブwebデザイン(Responsive Web Design) PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、 ディスプレイの幅に合わせてデザインを最適化する方法。 CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更します。 メリット 一つのソースで複数デバイスに対応できるのでメンテナンスが容易です。 また今後デバイスの種類が増えてもそれに対応できます。 それぞれのデバイスに合わせた形で調整できるのでユーザーエクスペリエンスも高くなります。 デメリッ
webデザインにおける視線誘導のおはなし | 07design.blog
こんにちは。今回はレイアウトの記事を書きます。「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、・・・こんにちは。今回はレイアウトの記事を書きます。 「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。 「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、一般的な視線の流れのパターンを表した図式のことです。 簡単に言うと「人間の目は左上から右下方向へ、チラチラしながら遷移する」というものです。 こういった視線の流れのパターンは、エディトリアルデザインなどでは当たり前に使われている技法・考え方らしいです。 テキストをレイアウトする場合には、左上・右下に重要なコンテンツを配置す
デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則
このブログ、Webデザインレシピのデザインをリニューアルしました。 この機会にデザインを勉強したことがない人でも、楽しくデザインをすることができるかもしれない、基本原則 4つをご紹介します。 この原則は「ノンデザイナーズ・デザインブック」著者 Robin Williams で詳しく解説されています。 古い本ですが、とっても素晴らしい本で今では新装増補版となって発行されているようです。 今回、このブログ – Webデザインレシピのデザインを、ガラッと変えてみました。これを機会にちょっとデザインの基本というか、デザインをするときにガイドとなる、4つの原則をおさらいしておきます。Webデザインに限らず、会社で提出する報告書や学生さんのレポート、レストランのメニューなど、ページと呼べるものには全部当てはまると思うので、Webサイトを作るとかじゃなくても、知っておいて損はないかもしれませんね。 せっ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
