文脈に奥行きを生む「後宮殿舎」 著者は日本文学研究者。 幼少時から「源氏物語」に親しみ、意外にわかっていない後宮の世界を中心に研究している。后妃制度や后妃の住まいや暮らしぶりといった事柄である。歴史的事実を明…

最近のウェブデザインのトレンドの中でも人気の高い「背景に大きな写真画像を使用」する際の利点と注意点、ショーケースを紹介します。 インパクト 写真画像を背景に使用すると人の目を引き、非常に面白いものとなります。使用する写真画像が大きいほど効果があります。 1,000の言葉よりも ウェブサイトの要点を言葉で表現するよりも的確な写真画像で表現できたら、たくさんの言葉で言い尽くすよりも価値あるものになるでしょう。 世界観に浸る 背景に大きな画像を使用していると、まるでIMAXの映画のような感じがします。退屈なウェブサイトだけを見ているのではなく、素晴らしい景観を見ていることにも匹敵するものです。 背景に大きな写真画像を使用する注意点 上に挙げた利点はとても魅力的なものです。しかし、写真画像を背景に使用する際に考慮すべき注意点もあります。 気が散らないように 使用する写真が複雑なものだと、ユーザーの

ページに配置するエレメントの特質を理解し、1/3ルールやスペースやグリッドなどのデザインルールを取り入れ、「機能するレイアウト」を作るポイントを紹介します。 Using Landmarks Makes Page Layout Easy 下記は各ポイントを意訳したものです。 はじめに レイアウト、あるいはページのコンテンツの配置はウェブデザインの成功にとって重要です。レイアウトは一つのエレメントから次のものに向けるためにコンテンツの優先順位をつけます。 もしレイアウトが正しく機能していれば、ユーザーはコンテンツに興味をもち、他のものには気をそらさないでしょう。ここではあなたのデザインで機能するレイアウトを作るためのヒントをいくつか紹介します。 下記の例では、多くの人が最初に写真あるいは見出しに目がいき、その後にテキストに、そして最後にリンクの順番になるでしょう。 このレイアウトでは、見出し、

TomatoCart- New Generation Ecommerce PHPで書かれた次世代のショッピングカートシステム「TomatoCart」。 ショッピングカートといえばosCommerceが有名ですが、TomatoCartはosCommerceからブランチしてweb2.0的な仕組みを取り入れたり、ExtJSを導入したりしていて、なかなか便利そうです。 ショッピングカートを実装する必要にかられたときに１つの選択肢として覚えておいてよさそうです。 管理画面がすごくて、Windowsのデスクトップ風UIで超リッチで直感的に使えるものになっています。 アイコンごとに機能が分かれていて、クリックするとアプリケーションが立ち上がるイメージで機能を利用できます。 管理画面のアイコンで立ち上がるアプリケーションっぽいものはExtJSを使って作られていて、使いやすさもなかなかよさそう。 SEOフレ

Philadelphia ページの打ち出しエリアを使用して、ダイナミックにスライドショーが展開しています。 実装のイメージ ポイントとなるのは、テキストを含めた背景画像のスライドショーです。 透過PNGを使用して、HTML+CSS+jQueryで同様のコンテンツを実装します。 実装のイメージ 実装とダウンロード HTMLは各スライドはdiv要素で実装されているので、コンテンツに合わせてさまざまな要素に変更することが簡単です。 スクリプトのベースにはjQueryが使用されており、オプションではスライドショーのスピードが調整できます。 コードはサイトにも記載されていますが、一括でダウンロードすることもできます。

Subscribe to our newsletter Sign up to receive tips and tricks on how to create online designs that make people take action.

jQueryでチェックボックスをすごい形にカッコよくしちゃう方法が紹介されていました。 具体的なデザインは以下。もうチェックボックスの原型がないという、面白くて分かりやすいＵＩに調整されています。 マークアップ上も、次のように綺麗になっています。 実際のタグは、不可視にしちゃって、jqueryによって、on/off を切り替えればいいわけですから、まさに何でもありで、参考にして他にも面白く、使いやすいデザインはいくらでも作れるかもしれません。 jQueryによるクロスブラウザ対応が出来るので、昔のように神経質になる必要もないですね。 詳細は以下のエントリから参照。 Pretty checkboxes with jQuery | Aaron Weyenberg

nettuts+で、超クールなJavaScriptプラグインがまとまっています。 いくつかご紹介しますね。 » JQuery Validate jQueryによるクライアントサイドのバリデート » PrettyCheckboxes – jQuery FancyFormと似たかわいいチェックボックスを作るjQueryライブラリ » Thickbox 画像だけでなくテキスト等も読み込めるlightbox » FancyBox 超クールなFancybox。画像をすーっと拡大してくれる。デザインがMacライク » Slideshow 2! for MooTools とてもクールなMooToolsによるスライドショー » SmoothGallery こちらも超クールなスライドショー。MooTools v1.11を使用 » DynamicDrive – Carousel Slideshow 3Dに魅せ

Six Revisionsで、魅力的なUIにするためのjQueryプラグインが紹介されています。 ざっといくつかご紹介。 » SimpleModal シンプルなモーダルウィンドウ » Panel Gallery ユニークなトランジションを持つスライドショー » Easy Image Gallery サムネイル表示型のイメージギャラリー » PikaChoose Belvedere Incに見られるクールなギャラリー » SlideBox たくさんのリンクを表示できるスライドボックス » Single Drop Down Menu シンプルなドロップダウンメニュー » Mouse Over Animation for Text テキストにマウスオーバーすると、明度を変えてくれたりうにょ〜っと拡大してくれるエフェクト あまり見たことのないものやシンプルで使いやすそうなギャラリーなどが揃っていま

This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

リアルな現実をサイトデザインに組み込んだサイトデザイン作成チュートリアル集。 次のような、ノートをそのまま開いたような自由なレイアウトの作成チュートリアルをまとめてみました。 Create a realistic web layout デスクにノートを広げたようなユニークなレイアウト作成チュートリアル Nature Portfolio Layout Interior Design Layout 3D Blog Layout Create a grunge personal portfolio layout Computer Store Web Layout Professional Business Layout Desktop Style Web Layout Photoshop Tutorial 机上スタイルのレイアウト作成チュートリアル Grunge Photographer Lay

IxEdit - The First On-the-Fly Interaction Design Tool for the Web. IxEdit (Public Beta) フリーダウンロード IxEdit は JavaScript ベースのウェブ用インタラクションデザインツールです。IxEdit を使えば、デザイナーはコーディング無しで DOM スクリプティングを実践し、ウェブページ上の要素をダイナミックに変更したり、追加したり、動かしたり、変形させたりすることができます。特に、IxEdit はウェブアプリケーションのプロトタイピング段階において様々なインタラクションを即座に作って試してみるのに役立つでしょう。 インタラクションとは？ インタラクションとは、ユーザーのアクションに応じてスクリーンの状態が変化することです。つまり、ユーザーインターフェースの振る舞いと言ってもよいでしょう。

■Ajax : 勉強用サンプル&解説 Ajax (Asynchronous JavaScript+XML) がどのようなものか勉強用としてページやサンプルを作成しましたので参考にしてみてください。 最終更新日：2017/12/16 AM 9:27 Ajaxを勉強しよう jQuery入門 【短期集中連載】この冬作ろう！jQueryプラグイン講座 上のjQueryプラグイン講座の続き 【第13回を追加】 Yahoo UI Library入門 WebDesigning掲載サンプル マイコミジャーナル記事 (Ajax関連) Ajax エフェクト Ajax関連書籍一覧 Ajax ライブラリ一覧 Webサービス APIサイト一覧 Ajax ライブラリリファレンス Prototype系ライブラリ サンプルプログラム 逆引きAdobe Spryリファレンス Google Maps API リファレンス G