はてなブックマーク

白を中心としたシンプルで美しいデザインのウェブサイトをまとめました。日本語サイト中心なので、サイト制作の参考にしやすいかと思います。 Francfranc フランフラン コーキーズクッキー オンラインショップ recomincaリコミンカ 代官山 蔦屋書店 momochi soap Starbucks Coffee Japan SPIRAL WEB トリニティワークス アリンコ - ARINCO 株式会社キュービックホールディングス ヨイチの社長ブログ 面白法人カヤック Sゝゝ Online Shop 公長齋小菅 アトリエm4 au 東京女学館大学 日本デザインコミッティー 茶筒の開化堂 bathappy 約9,000種の紙が買える竹尾のウェブストアtakeopaper.com L'ALBAホールディングス 電通ワークス 博報堂（HAKUHODO） 株式会社 USEN マイナビ 目黒区美術

CSS3を使うと、画像を使わなくても、色んなバリエーションの水平線（hr）が作れます。ということで、この記事ではかっこいい水平線の作り方をご紹介します。 両端が薄くなっているタイプの水平線 hr.style-two { border: 0; height: 1px; background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75)

Stacked Login Form これは使い勝手がよさそうですね。 Download Login Window 2/Lite こちらも上のものと似ていますが、使いやすそうです。 Download Login modal box ログインフォームと会員登録が一緒になったもの Download Clean & Simple Signup Form (PSD) 確認パスワードを入れさせるタイプのログインフォーム Download Search boxes いろいろなデザインの検索ボックス Download デザインがシンプルなので、いろんなサイトで使えそうでいいですね。続きはこちらからどうぞ 参照: 25 Fantastic Free Form and Field PSDs 関連記事 シンプルで上質なウェブデザインの国内サイトまとめ シンプルで使い勝手がよさそうな25のフォームのPSD 煙を

.box1{ width:400px; margin:40px auto; padding:15px; border:1px solid #ccc; background-image: -ms-linear-gradient(bottom, #fff 0%, #fff 50%, #eee 100%);/* IE10 */ background-image: -moz-linear-gradient(bottom, #fff 0%, #fff 50%, #eee 100%);/* Mozilla Firefox */ background-image: -o-linear-gradient(bottom, #fff 0%, #fff 50%, #eee 100%);/* Opera */ background-image: -webkit-gradient(linear, left bott

ボタン素材を探している最中、色合いといい、サイズといい、良い感じのボタンにめぐりあったのでご紹介します。PSD形式なので、文字や色をカスタマイズして使うことができます。 Download button white color with green ribbon (Free PSD) 薄っすらと入った白のグラデーションと緑色のリボンがついたエコっぽい感じのボタンです。 Download buttons (Free PSD) 黒と白の2つのクールなボタン。オーソドックスな色なので、どのサイトにも合いそうです。 A Large Green Button シンプルな緑色のボタン Simple Download Buttons (PSD) 3つの異なるボタン。このボタンは、通常のボタンの時とホバー時、アクティブ時のボタンに使えます。 Call to Action Button 重厚で洗練されたデザイ

見出しに使えるリボン風のCSS3サンプルのコードをメモ代わりにアップしておきます。ボックスシャドー、テキストシャドー、グラデーションも使っています。 after擬似要素でリボンの左下に影を付けています。 .sample_title{ background: #444; background: -moz-linear-gradient(left, #222 0%, #444 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#222), color-stop(100%,#444)); background:-webkit-linear-gradient(left, #222 0%,#444 100%); background:-o-linear-gradient(left, #222

こういうサービスは他にもいくつかあるのですが、日本語に対応していなかったり、途中で横が切れてしまったりといった感じで、実務に使うには厳しいものばかりでした。しかし、「Free PDF Converter」はその問題をクリアしています。 使い方は簡単です。サイトに移動して、PDF変換したいサイトアドレスを入力するだけです。すると下記画像のように綺麗にPDF変換が完了します。 こちらからご利用ください Official site 関連記事 HTMLをPDFに変換する日本語も対応しているジェネレータ「Free PDF Converter」 CSSグラデーションが簡単に設定できるジェネレータ「Ultimate CSS Gradient Generator」 たった2分でティーザーサイトが作成できるWEBサービス「coming soon generator」 リアルタイムに情報を収集してくれるアクセ

Yahoo!リスティング広告のインタレストマッチは、インターネットユーザーが過去に閲覧したり検索したページの内容に応じて、最適な広告を掲載する興味関心連動型広告です。検索しているお客様をターゲットにしたスポンサードサーチに対し、特定のテーマに興味を持っているお客様をターゲットにしアピールする広告サービス、それがインタレストマッチです。 インターネットを利用中のお客様が閲覧中のページ内容や興味関心（過去の閲覧履歴や検索キーワード）などから、広告主様の商品やサービスに興味がありそうな人に広告を表示する仕組みです。これからの見込み客の潜在ニーズにアプローチすることができます。

CSSグラデーションをPhotoshopのように編集して、CSSを生成してくれる便利ツール「Ultimate CSS Gradient Generator」をご紹介します。 こちらから利用できます。 Ultimate CSS Gradient Generator 使い方 使い方の説明はもはや不要なのではないかと思います。Photoshopのように、カラーピッカーを使って感覚的にグラデーションをセットできます。 あらかじめ いくつかのグラデーションが揃っていますので、慣れない間はそちらを使っても良いかもしれません。以下は、ソースの生成例です。 background: #b7deed; /* old browsers */ background: -moz-linear-gradient(top, #b7deed 0%, #71ceef 50%, #21b4e2 51%, #b7deed 10

coming soon generator 項目を入力して「Generate」ボタンを押すと、コードが生成されますので、それをアップすれば完了です。簡単でしょ？ こんな感じになります。 遊びでデモをアップしてみたので、どうぞ 音響と演出の迫力は満天ですね！ただ、演出中の卑猥なキーワードは、こちら側ではどうにもできないみたいでした。 coming soon generator 関連記事 HTMLをPDFに変換する日本語も対応しているジェネレータ「Free PDF Converter」 CSSグラデーションが簡単に設定できるジェネレータ「Ultimate CSS Gradient Generator」 たった2分でティーザーサイトが作成できるWEBサービス「coming soon generator」 リアルタイムに情報を収集してくれるアクセス解析ツール集 ヤフーメルマガ、カプライトが廃刊、メ

簡単に出来るものからハイレベルなモノまで、煙を使ったカッコイイPhotoshopチュートリアル集のご紹介です。何かと参考になるものばかり揃っています。 Manipulate Smoke to Create Hyper-Real Images Abstract smoke art tutorial Smoke Type in Photoshop in 10 Steps 煙によってクールな演出が出来てますね。続きは元記事の「Magnificent Collection of Smoke Effect Photoshop Tutorials」から16パターンのフォトショップチュートリアルをご覧頂けます。 関連記事 シンプルで上質なウェブデザインの国内サイトまとめ シンプルで使い勝手がよさそうな25のフォームのPSD 煙を使ったカッコイイPhotoshopチュートリアル集 日本語で読めるPhoto

簡単に出来るものからハイレベルなモノまで、煙を使ったカッコイイPhotoshopチュートリアル集のご紹介です。何かと参考になるものばかり揃っています。 続きを読む

加工しなくてもそのまま使えそうな 高品質な花/植物の無料写真素材を配布しているサイト「プリザーブドフラワー屋が作ったフリー写真素材集」のご紹介です。 プリザーブドフラワー屋が作ったフリー写真素材集 例えばこんなキレイな写真素材が配布されています。 こういう品質の高い素材サイトは重宝しますよね。サイトアクセントとして使えそうです。Photoshopで加工した素材もダウンロードできるようですよ。サイトはこちらからどうぞ Official Site 関連記事 商用サイトで使える無料の写真素材サイト 厳選まとめ フリーのロゴ素材がダウンロードできる「ロゴマルシェ」 クリック率が上がりそうな良い感じのボタン素材集 写真の撮り方が絶妙な花/植物の無料写真素材サイト 光彩が美しいフォトショップブラシ50 最近インストールしたフォント一覧2010年9月 渡すだけでも印象を残しそうなクリエイティブな名刺テン

デフォルト <?php wp_list_pages(); ?> リストの見出しを隠す <ul> <?php wp_list_pages('title_li='); ?> </ul> リストの見出しを変える <ul> <?php wp_list_pages('title_li=<h2>' . __('midasi') . '</h2>' ); ?> </ul> 時系列順にソート <ul> <?php wp_list_pages(‘sort_column=post_date&show_date=created’); ?> </ul> 特定のページを除外 <ul> <?php wp_list_pages('exclude=17,38' ); ?> </ul> 特定のページだけ表示(ID7&13&26のみ) <ul> <?php wp_list_pages('include=7,13,26&tit

光を表現する為のフォトショップブラシ。黒をバックに描くと素敵なワンポイントになりますね。海外のまとめ記事からご紹介します。 High-Res Glowing Light Stream (6 Brushes) Unreal Brushes v.4 (9 Brushes) Winter Breeze (12 Brushes) Refresh (10 Brushes) Energy (14 Brushes) もっと詳しく見たい方は、こちらからどうぞ。かっこいいフォトショップブラシがたくさん揃っています。 関連記事 フリーのロゴ素材がダウンロードできる「ロゴマルシェ」 クリック率が上がりそうな良い感じのボタン素材集 写真の撮り方が絶妙な花/植物の無料写真素材サイト 光彩が美しいフォトショップブラシ50 最近インストールしたフォント一覧2010年9月 渡すだけでも印象を残しそうなクリエイティブな名刺

フォトショップなどのレタッチソフトでポラロイド風の画像を作るのが面倒という時、役立つフリーソフトをご紹介します。というか、思ったよりかなり高機能でした。 ポラロイド風 - 写真加工.com インストール不要の高機能ジェネレータ。台紙をゆるやかに凹ませたり、影を付けたり、色々な設定が出来ます。 フリーフォントで文字を書く、サイズ調整や回転、形、影、用紙、へこみ、モノクロ、セピア、等 まだまだ他にも設定がありますが、たいていのことがサイト上から行えます。例えば、このような出来栄えになります。なかなか素晴らしいのではないでしょうか。 Poladroid project 発想がユニークです。ツールをインストールすると、ポラロイドカメラがデスクトップ上に現れます。そこに写真をドラック＆ドロップすることで、本物のポラロイドかのように写真が徐々に浮き上がってきます。 勿論、その過程で保存することも出来ま

Webサイトのフッターにあるコピーライトの年号。これ、年が変わって更新し忘れてしまうことが結構あるので、Javascriptのソースをメモ代わりに書きとめておきます。 ・(Source)コピーライト表記の年度をJavascriptで自動更新する Copyright©<script type="text/javascript">myDate = new Date() ;myYear = myDate.getFullYear ();document.write(myYear);</script>mydomain.com. All Rights Reserved. ■関連記事 HTMLや画像編集の手間を省く為の8つのツール Webサイトの画像作りに猛烈に役立つ17のジェネレータ 関連記事 プロフィールリンク集を作りたい時に役立つjQuery「Tim Van Damme」 ポラロイド写真をオシャレ

サイトメンテナンスを行う時、出来ればメンテ中のデザイン崩れや調整などを見せたくないものです。そこで、メンテナンス時に役立つワードプレスのプラグインをご紹介します。 Maintenance Mode メンテナンス中にメンテナンス用画面を表示するプラグインです。訪問者に見せる文章やメンテに要する時間を任意の設定で表示させることが出来ます。 使い方は、「Activated」にチェックを入れ、右の項目にメンテに要する時間を入力し、最後に表示させたいタイトルとメッセージを記入してアップデート。メンテナンスが終わったら、「Deactivated」にチェックを入れてください。 このプラグインは、ログインしていないユーザー以外、全ての閲覧を完全にシャットアウトするので、大がかりなメンテナンスにも対応が可能です。 Download Theme Tester 先ほどの「Maintenance Mode」では完

Code Dekar Sertig St Marie 全てフリーで使えるフォントです。細いラインが美しいですね。 よろしければどうぞ。 関連記事 クリック率が上がりそうな良い感じのボタン素材集 写真の撮り方が絶妙な花/植物の無料写真素材サイト 光彩が美しいフォトショップブラシ50 最近インストールしたフォント一覧2010年9月 渡すだけでも印象を残しそうなクリエイティブな名刺テンプレートいろいろ デザインのワンポイントとなるフォトショップパターンファイルまとめ 幻想的な気分を味わえるデスクトップ壁紙集 2010年8月

WordPressのプラグインやJavascriptなどで配布されている、コンテンツを横スクロールでかっこよくまとめることができるコンテンツスライダー「SlideDeck」のご紹介です。 SlideDeck 見出しをクリックすると、横にスライドします。 Demo & Download 無料版のライセンスはGPLとなっており、Pro版はWordPressプラグインが$49、Javascript一式が$99となっています。 見出しやコンテンツを画像に換えたりと デザインの汎用性もあるので、本格的に導入を検討するなら購入もありかもしれませんね。 関連記事 横スクロールがかっこいいコンテンツスライダー「SlideDeck」 美しいスライドの写真ギャラリーを表示するjs「ImageFlow」 「この記事を見た人は以下も読んでます」を表示するプラグイン「feedControl」をFC2ブログに設置 プ

小さな文字を並べて ロゴを作成するフォトショップチュートリアルです。簡単ですので、よろしければアレンジしてお使いください。 最終画像 出来上がりの画像です。 Step1 サイズは何でもいいですが、背景色を黒に設定します。 Step1 カンバス全体に テキスト(color:#404040)を描きます。なるべく空白を埋めるように行間・フォントサイズを設定するのがポイントです。 Step2 先ほど描いたテキストを移動ツールで時計回りに15度回転させます。回転後、右クリック→「テキストをラスタライズ」 Step3 以下のようなオブジェクトを用意します。テキストやシェイプの場合は、先ほど同様、レイヤーを右クリック→「ラスタライズ」を行います。 Step4 自動選択ツールでオブジェクトの一つを選択範囲とします。 Step5 一番初めに書いたレイヤーを「編集」→「カット」で切り抜きます。 Step6 先

パブリックドメイン(public domain)は著作権の発生しない制作物などを指しますが、そのパブリックドメインにあたる写真素材をWikimedia Commonsから「建物」というテーマで集めてみました。勿論、全て商用利用可です。 各画像をクリックすると、元ページに移動します。 Proskauer Strase Berlin (640x480px) Golden North Hotel, Skagway, Alaska (4,252x3,343px) Rivertzke (2,592x1,944px) States Building (1,127x1,562px) Salt Lake City and County Building (3,264x2,448px) States Building Bibliotheque Publique 1886 (1,573x937px) Mari