ドットインストール代表のライフハックブログ
![IDEA * IDEA](https://cdn-ak-scissors.b.st-hatena.com/image/square/7d57bc10eb04f07892c34ef62a2513be3fe2b281/height=288;version=1;width=512/http%3A%2F%2Fwww.ideaxidea.com%2Fwp-content%2Fuploads%2F2009%2F06%2Fui_top1.gif)
Webコンテンツは文字主体のいわば“書類”です。絵画でも写真でもありません。書類に対して徹底的に芸術性を追求することには,おそらく意味がないでしょう。「構想3年,4年以上の歳月をかけて完成した,とても美しい芸術的な交通費申請書」があって,人々がその美しさに小一時間足を止めて鑑賞するといったことはありえません。 しかしながらWebコンテンツは純粋な書類だということでもなく,少なくても閲覧する人の眼を意識して,使いやすさとともに美しさも要求されるものですね。いわば“機能美”です。 自動車を思い出してください。自動車は走るという目的だけであれば,鉄で四角い箱を作り,エンジンと座席を突っ込んで,タイヤを四つほど付けておけばいいんです。しかし,そんな何の変哲もない箱形の車では営業的に成功はしないでしょう。Webコンテンツは自動車と同じ工業製品であり,機能性とともにユーザーに好感を持ってもらうために機
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX. The skilled use of color gradients, li
今日は、ワイドディスプレイの普及とディスプレイの高精細化が進んでいることを考慮して、改めてWebサイトに適切な文字サイズを考えてみましょう。 あなたのサイトでは、本文の基本文字サイズを何ピクセルにしていますか? その文字サイズは、訪問者にとって見やすいサイズですか? 二昔前は、小さな文字のオシャレなページが流行っていましたが、ここ数年は「見やすい文字サイズ」を選ぶようになっていますね。ヤフーやアサヒコムなどの代表的なサイトでは、本文16ピクセルを基本としているようです。 実はこの「ピクセル」というサイズ指定は、絶対サイズではありません。というのも、どんなディスプレイでどう表示されるかによって、実際の表示サイズが変わるからです。 ちなみに、16ピクセルの文字は、XGA(1024×768ピクセル)の15インチ液晶では4.8mmの大きさになります。手元にあった新聞の本文文字サイズを測ってみると1
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX. Using color gradients, or effects that
五つの要素 とりあげる要素は,画面を見ている人が,基本的にはボソっとつぶやくような言葉です。私自身はこんな言葉になるのですが,多少個人差のあるニュアンスがありそうなので,Weblio 類語辞典からイメージ的にズレの少ないものをそれぞれ列挙しておきます。 【あ】あざと~ サイトに入った途端に感じる匂いというものは存在します。誘い込んで何かを奪おうとする類のサイトは,テンプレートの供給が少ないせいかもしれませんが,一目で「ん?」と感じます。宣伝色の余りに強いサイトは,同系統の匂いを感じます。言葉巧みに,その機能なり商品なり会社なりの宣伝をして,さらにユーザーに「もう一手」をどこか要求しているような感触です。 あざとい - 類語辞典(シソーラス) ▽商法・やり方などがあざとい あくどい ・ えげつない ・ 抜け目がない ・ 強腕による ・ 汚い(やり方) ・ ギンギラギンの ・ 毒々しい ・ ど
Flourish designs have been used in both print and web design for years. The interesting thing about flourishes is the way that they evolve and how people use them differently. They can be used to create a very classic traditional style look and on the complete other side of the spectrum they are commonly used in very modern, clean designs. These examples show the diversity and great flowing organi
Working with hugedomains.com was a quick and easy process. We got to speak to multiple real people located in Colorado without having to wait on hold! Our only complaint was we felt we had to overpay more than this particular domain was worth, and we weren't able to negotiate it down to a level that we felt was fair. However, payment and delivery were seamless, and within a few hours we had all of
Backgrounds In Web Design: Examples And Best Practices 以下、その意訳です。 ウェブデザインのスタイルは常に進化しており、大きな変化の一つに背景の使い方があります。 背景の重要な役割は、ウェブサイトへの興味を視覚的にひきつけることです。 背景はウェブサイトのテーマを支えるものであり、あらゆる可能性を考慮し設計を行う必要があります。 ここではウェブデザインの最近のトレンドをふまえた、背景のベストプラクティスを紹介します。 1. The Basic Background Structures 良い背景を設計する際に、背景の基本構造を知る必要があります。 Body Background bodyの背景は、昔から使用されている背景です。 主にイメージ、イラスト、テクスチャ、パターンなどを使用します。 Content Background コンテ
グラデーションを使用したアローでデザインされた、シンプルでクールなパンくずのスタイルシートをVeerle's blogから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <ul id="crumbs"> <li><a href="#">Home</a></li> <li><a href="#">Main section</a></li> <li><a href="#">Sub section</a></li> <li><a href="#">Sub sub section</a></li> <li>The page you are on right now</li> </ul> </textarea>
てんぽ: 可変幅で両側にドロップシャドウ(div一重で) CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど background-positionを%単位で指定し、ドロップシャドウ用の画像の大きさを調整することで、 画面の両側に影をつけたリキッドデザイン(画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会のような)を実現できます。 しかも必要となるdivはひとつだけです。 このようなデザインでは divを二重にして一方のdivの左端に左側用の影画像を、もう一方のdivの右端に右側用の影画像を背景画像として指定するのが簡単です。 <div id="left"> <div id="right"> </div> </div> #left { width: 90%; margin: auto; background: url(shadow-left.gif) top
ブログのサイドバー部分に影(ドロップシャドウ)を作成するカスタマイズを紹介します。 ブログを閲覧されている方なら、1度はこのドロップシャドウデザインのサイトをご覧になったことがあると思います。当サイトでも以前よりこのデザインを用いてますが、最初はどのようにしたら影をつけられのかがさっぱり分からず(そのテクニックが紹介されている記事もなく)、適用されているサイトのソースやCSSを眺めて勉強した想い出があります。 最近、いくつかのブログで紹介され始めたようで、このサイトでも取り上げたいと思います。 このエントリーでは固定レイアウトでのドロップシャドウとリキッドレイアウトのドロップシャドウについて説明します。サンプルには当サイトのテンプレートを使用しますが、仕組みがお分かりになればどのテンプレートでも適用可能です。なお、ドロップシャドウ画像自体の作成方法についても別途エントリーしたいと思います。
美しい矩形とは? 人間が一番美しいと感じると言われている、四角形の比率をご存じでしょうか。 黄金比と呼ばれるもので、約 「 1 : 1.618 」です。 このままですと計算しにくいので、100:160 とし、大体「 5 : 8 」で計算すると解りやすいと思います。 映画でも話題になったこの黄金比、実は、名刺やたばこのパッケージといった、多くのデザインに取り入れられています。 バナーなどを作成する際、どのくらいの間隔でレイアウトを決めるか、迷った事はありませんか? 感覚的に奇麗な配置が解れば良いのですが、どうもしっくりこないが、どこが悪いのか解らない・・という場合もあるかと思います。 そんな時に活用して頂きたいのが、この黄金比です。 例えば、フォントのサイズが16pxのボタンを作る場合、余白に黄金比を取り入れると、上下10px、左右16pxとなります。 また、最近流行の透明感があ
For beginner web designers – design tutorials really help to understand the basic knowledge about web design!, Here is a collection of 27 layout design tutorials that will help you with designing a decent looking website. Some of them are really good!, I’ve previously Showcased 27 Best Photoshop Web Layout Design Tutorials to Design Decent Web Layouts, this post is the continuation of that article
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く