This domain may be for sale!
文章を読み易くする為に段落を用いてレイアウトすることは非常に多く、いかに読みやすく、いかに見やすいかを考えて構成する必要がありますね。 1.段落の使い方 2.読みやすい改行位置 3.箇条書きについて 4.文章をデザインするという事 段落の使い方 このブログではある程度の長さで1段落を設定し、一つ一つのブロックが長過ぎないようにある程度の調節を心がけています。 しかし可読性や視認性の事を考えると当然これだけでは駄目ですよね。もっと考えるべき点があります。 今回はちょっとその辺りについて考えをまとめてみたいと思います。 読みやすい改行位置 まず文章を構成するにあたり、必ず考えるべきなのは改行の位置です。Webに限らず紙媒体でも同じで、どこで改行すれば読みやすいのか・見やすいのかを意識するのはとても大切な事ですよね。 基本的に改行は句読点位置で行う事。これが一番シンプルではないでしょうか？あと、
PHPカンファレンス2012@東京 ( http://www.ustream.tv/recorded/25414614 )
元々これはwebcre8が人にデザインを教えるとき、「細部まで考えて考えて決定するからこそデザイナなんだよ」と言う事を伝えたいが為に書こうと思ったものです。熟練者の方も、読んで同様に思われましたら是非教育に使ってみてくださいｗ はじめに：デザインとは webcre8は「webデザイン」の門扉を叩いてから3年程。まだまだこの世界ではwebの先輩方から学ばせてもらうばかりですが、曲がりなりにも「デザイン」というもの自体とは長く向き合ってきたつもりです。 webcre8の考えでは、例えばゲームのキャラクタの服の飾りであろうと、安売りの札の配色であろうと、webデザインのレイアウトであろうと、とにかく「デザイン」という作業は「なぜそれをそうするのか」という思考の戦いであると、今はそうなっています。 だから今webcre8自身が向き合っているのはたまたまwebデザインですが、このこと自体は建築デザイ
お久しぶりです。デザイナーの野田です。 まず、今回の記事を見ていただく前に、前回と前々回に書かせていただきました。 「必読！5分でわかるレスポンシブWebデザインまとめ」 「必読！5分でわかるレスポンシブWebデザインまとめ Pt.2」 を読んでいただけるとスムーズです。 今回で、【必読！5分でわかるレスポンシブWebデザインまとめ】のシリーズも最後にさせていただきますので、少しコンテンツ量が多くなります。 100％ 5分では分らないので、タイトルはスルーしてやってください。 様々なサイトでレスポンシブWebデザインについて紹介されていますが、制作方法が異なっていたり、内容が少し難しいと感じる部分がありました。 この記事は、ディレクターの方やデザイナーの方、どちらにも理解しやすいように書かせていただいてます。 また、これまでレスポンシブWebデザインについてやってきましたが、基本的な部分で
WEBで成果を出すために必要なのは、 コンバージョン率を上げる5つのステップ！ 企業の販促・広告担当者、そして、 WEBディレクター・デザイナーは、常に成果を求められる。 「コンバージョン率を上げろ!」 「直帰率・離脱率を下げろ!」 「もっと成果に繋がるWEBサイトを構築しろ!」 確かに、言うのは簡単だ。 でも、みんな、それが実現できなくて悩んでいる。 そこで、今回のブログは、そのような状況で参考にして欲しい 「コンバージョン率を上げる5つのステップ」についてのお話。 あらゆる見込み客をコンバージョン率の高いコンテンツへ誘導する 結論から言うと、成果を出すためには、 「コンバージョン率を上げる」ことが必要になる。 ここで言う「コンバージョン」だが、 WEBサイトに来てくれたユーザー（＝見込み客）に などが、それに該当すると考えて欲しい。 WEBサイトの目的に応じて、あらゆる見込み客をコンバ
A modular CSS framework for truly flexible, accessible and responsive websites Features Bulletproof flexible grid system Flexible forms toolkit with theme-support Focussed on web standards & accessibility Optimized typography for all standard elements Matched building blocks for rapid prototyping Namespacing avoids conflicts with third-party CSS Well prepared for HTML5 and CSS3 Very slim framework
二度目まして。デザイナーの野田です。 レスポンシブWebデザインについて、僕なりにまとめてみたのでご覧下さい。今回は、制作に関することではなく、最低限知っておかなければならないことの基本編になります。 独学でつまずいていませんか？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情報として持っておいて損はないはず。下記におすすめスクールを集めてみました！ レスポンシブWebデザインとは 「レスポンシブWebデザイン」とは、PC、タブレット、スマートフォンなど、複数の異なる画面サイズをWebサイト表示の判断基準にし、ページのレイアウト・デザインを柔軟に調整することを指します。 現在はPCやスマートフォンなど、デバイス毎に各HTMLファイル
Webデザイナーのみなさん、DTP デザインってどうですか？私は DTP デザインが苦手なんですけど、Webデザイナーをしていると、たまに印刷物のデザインを頼まれることがあります ...。そんな時のことを考えながら書いた覚え書きです。 私は Webデザイナーですが、よくフライヤーや名刺、たまにポスターなんかの紙媒体のデザインを頼まれます。私は DTP について勉強した訳ではないし、教わったこともないので紙媒体は苦手です。私の周りの Webデザイナーさんたちは、「Web も紙も一緒だよー」という人もいますが、私はちょっと違う部分もあるかなと思っています。 今日は苦手を克服するために、私なりの Web と紙の違い、DTP での注意点を整理しておこうと思います。ここで言う紙、紙面は私の仕事の範疇である名刺やフライヤー、ポスターなどに限ります。また、In Design とか、Illustrator
昨日はJavaScriptを使ってPinterest風レイアウトを実現するスクリプトを紹介しましたが、今日はJavaScript無しでスタイルシートで実現するテクニックを紹介します。 デモページ：幅900pxで表示 実装 HTML HTMLは非常にシンプルで、各パネルをdiv要素で実装し、それらをdiv要素で二重に内包します。 <div id="wrapper"> <div id="columns"> <div class="pin"> <img src="image.png" /> <p>テキスト</p> </div> <div class="pin"> <img src="image.png" /> <p>テキスト</p> </div> ... ... </div> </div> CSS Pinterest風レイアウトをCSSで実現するには、二つの方法が考えられます。 一つ目はfloa
CSSでWebサイトのレイアウト組み＋装飾の基本プロセスCSSでレイアウトを組むのは、最初はすごく難しく感じるかもしれません。私も何度も挫折しかけました。。でもよく使うプロパティを理解し、少しずつ組み立てていくと自然と慣れてきますよ！今回はサンプルファイルも用意したので、ダウンロードしてコードをじっくり見てやってください。連載企画「実践で学ぶWebサイト制作ガイド」、CSSでラストスパートです！ 実践で学ぶ Web サイト制作ガイド：その 7目標：CSS でレイアウトが組める・基本的な装飾ができる必要なもの：Windows メモ帳 や、Mac OS Text Edit などの文章エディタツール。もちろん Adobe Dreamweaver などの Web 系オーサリングソフトがあるならそれで OK対象レベル：CSS の基礎知識がある・基本的な CSS が手打ちで書ける目次誰のため？何のため
この記事は、以下のような方を対象にしています。 現在Webデザインを仕事にしていて、さらにデザイン力をつけたい方 今はプログラマー、ディレクター、コーダーなどデザイン以外の仕事をしていて、来年はデザインも手がけたい方 ※この記事は、2010年末に公開したものを、文章と参考サイトなどのリンク先を修正し、2019年末に再公開したものです。 私は元々Webデザイナーなのですが、デザイン以外の仕事が連続したときなどデザインスキルの低下が心配になってくるので、年末年始など時間があるときは自己流のWebデザイン勉強法をしています。 もしかしたら他の方にも役立つかなと思い、公開しました。 今回は、主にWebデザインの中でも「レイアウト」について書いています。 まずは「知る」こと 私がWebデザインについて基礎からきっちり勉強したいと思い、Webデザインスクールに見学に行ったり「Webデザイン」と名の付く
このブログ、Webデザインレシピのデザインをリニューアルしました。 この機会にデザインを勉強したことがない人でも、楽しくデザインをすることができるかもしれない、基本原則 4つをご紹介します。 この原則は「ノンデザイナーズ・デザインブック」著者 Robin Williams で詳しく解説されています。 古い本ですが、とっても素晴らしい本で今では新装増補版となって発行されているようです。 今回、このブログ – Webデザインレシピのデザインを、ガラッと変えてみました。これを機会にちょっとデザインの基本というか、デザインをするときにガイドとなる、4つの原則をおさらいしておきます。Webデザインに限らず、会社で提出する報告書や学生さんのレポート、レストランのメニューなど、ページと呼べるものには全部当てはまると思うので、Webサイトを作るとかじゃなくても、知っておいて損はないかもしれませんね。 せっ
WEB、システム、ブレイクダンス、読書などなど・・・好きなことはどんどんやってけば、すごいことになるでしょ！？やんなきゃ、何も始まんない♪ このサイトでは40種類の2カラム、3カラムのCSSレイアウトが紹介されています。 このブログは、フッター付き中央列が可変の3列スタイルシートにしています。 そのサンプルも含めていくつか紹介します。 基本のレイアウト サンプルは、Header,Content,Navigation,Extra stuff,Footerの五つの要素を基本としています。 <div id="container"> <div id="header">Header</div> <div id="wrapper"> <div id="content">Content</div> </div> <div id="navigation">Navigation</div> <div id=
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く