タグ

ブックマーク / ascii.jp (90)

  • あのFlashサイトのUIをjQueryで作る (1/5)

    「見た目に美しく、ユーザーに楽しさや心地よさを与えるUIを作りたい」 そう考えたときに参考になるのが、Flashで制作されたWebサイトです。最近では、JavaScriptによるリッチなUIを持つWebサイトも増えてきていますが、長年、さまざまなUIが実験的に生み出されてきたFlashの世界には、まだまだユニークなサイトが多くあります。 たとえば、今回紹介する「ハーズ実験デザイン研究所」のWebサイトは、フルFlashで制作された“楽しい”コーポレートサイトです。同社が手がけてきた過去の作品を、時間の経過とともにゆっくりと切り換えていく様子は、まるで1の映像作品を見ているよう。メニューのちょっとした動きひとつをとっても、ユーザーを楽しませようという意図が感じられます。 Flashサイトのような美しくて楽しいUIを、JavaScriptでも作れないか――それが今回のテーマです。 今回のお手

    あのFlashサイトのUIをjQueryで作る (1/5)
  • JavaScriptでびゅんびゅんスライド!ページ切換法 (1/5)

    HTMLだけで作ったシンプルなサイトもいいですが、時にはもっと派手なサイトを作りたい、ということ場合もあるでしょう。これまでもこの連載ではさまざまな“小技”を紹介してきましたが、ページ全体を大きく描き換えるには、以前ならFlashが不可欠でした。ところが最近では、JavaScriptHTMLの組み合わせでも、かなりの表現できるようになり、実際にそうしたWebサイトも増えてきています。 今回はそんなサイトの1つ、「Baltijos prodiuserių grupė」にページ全体の切り換えテクニックを学びたいと思います。 今回のお手サイト: 『Baltijos prodiuserių grupė』 リトアニアでイベントの企画・制作を手がける企業のコーポレートサイト。会社概要、業務内容、事例紹介の3つのコンテンツと問い合わせフォームからなるシンプルな構成。フルーツや花など、植物の写真と楽器

    JavaScriptでびゅんびゅんスライド!ページ切換法 (1/5)
  • あなたの発想をズバリまとめるMac版「iMindMap」 (1/2)

    【SPEC】 開発元●英ブザンオンライン社 販売元●アルマクリエイションズ 価格●1万9800円 http://www.imindmap.jp/ 対応システム●Mac OS X 10.4以上(Leopard対応) 対応マシン●PowerPC G4以上またはIntel CPUを搭載したMac 【COMMENT】 価格は少々高いながらも、ブザン氏が提唱するマインドマップのルールを守った描画ができるため、初心者にこそ使ってほしい。 マインドマップ提唱者のこだわりを随所に反映 マインドマップは、漠然とした問題やアイデアを書き出して可視化し、俯瞰→整理→再構築することで、問題の解決やアイデアの創造に役立てる思考方法。同種のソフトは多く存在しており、「Buzan's iMindMap Ver.3 日語版 Pro for Mac」の特徴はマインドマップの提唱者であるトニー・ブザン氏が監修している点だ。

    あなたの発想をズバリまとめるMac版「iMindMap」 (1/2)
  • 4000ページ以上の資料を横断検索!アドビ開発者必須ツール

    デスクトップ、ケータイ、組込み機器、とさまざまなシーンでの活用が格化し、盛り上がりを見せるAdobe AIR(関連記事)。そろそろ自分もAIRアプリを作ってみたいけど、とりあえずどこから情報収集したらいいか分からない――。そんな開発者にピッタリの情報収集支援ツールが先月、アドビ システムズ(日法人)からリリースされた。それが「Adobe Developer Box」だ。 デスクトップに現われるアドビ開発者のリソースセンター Adobe Developer Boxは、AIRのほか、Flash(ActionScript)/Flex/LiveCycleといった、アドビのRIA(リッチ・インターネット・アプリケーション)関連技術の最新情報を入手できる無償のデスクトップガジェットだ。Developer Box自体もAIRランタイム上で動いており、WindowsMac OS X、Linuxで利用

    4000ページ以上の資料を横断検索!アドビ開発者必須ツール
  • WordPress&MTにLPOを導入しよう! (1/2)

    Webサイト運営者の間で急速に関心が高まっている「LPO(Landing Page Optimization:ランディングページ最適化)」。この特集では2回にわたって、LPOの基的な考え方から必要な技術、自分で手軽に試せる実装方法までを紹介してきました。 最終回となる今回は、これまでの2回で得た知識を踏まえ、より手軽にLPOを始められる、CMS(Content Management System)を使った簡易LPOの導入を紹介します。取り上げるのは、個人や中小規模サイトの構築でよく使われる「WordPress」と「Movable Type」の2つ。それぞれのツールに対応したプラグイン/テンプレートモジュールを組み込み、自分のWebページに到達するためにユーザーが検索サイトに入力したキーワードに応じて、関連するコンテンツ(エントリ)のリストを表示するシンプルなLPOを紹介します。お使いのツ

    WordPress&MTにLPOを導入しよう! (1/2)
  • LPOって何? 始める前に読む基礎知識 (1/3)

    Webサイト運営者にとってすっかりポピュラーな存在になった「SEO(検索エンジン最適化)」。企業サイトから個人サイトまで、何らかの方法でSEOを施すことはもはや当たり前になりました。その一方、ここ最近急速に注目されるようになってきたのが、「LPO(ランディングページ最適化)」という考え方です。LPOは大規模サイトを中心に導入が進んでいますが、まだまだ現場のサイト運営やWeb制作者が“使える”情報は多くありません。特集では今回から3回にわたって、「自分でできるLPO」(セルフLPO)をテーマに、LPOの考え方から個人サイトでも試せる手軽な実装方法までご紹介します。 LPOは「最初に見るページ」をよりよくする方法 そもそも、「LPO」とは何でしょうか? 具体的にどんなことをするのでしょうか? LPOはSEO(検索エンジン最適化)やSEM(検索エンジンマーケティング)に比べるとまだまだ知名度が

    LPOって何? 始める前に読む基礎知識 (1/3)
  • HTMLもCSSも書換不要!気持ちいいスクロール (1/5)

    Webサイトを作るにあたって、ネット上でデザインの参考になるサイトを探していると、プロのWebデザイナーのポートフォリオサイトに行き当たることがあります。ポートフォリオサイトはデザイナーにとってのショーケース。気合の入った作りや実験的な要素を盛り込んでいるサイトもあり、単純に眺めても楽しいものです。 今回取り上げるサイト「Cosmive」は、Webデザイナー・Muhammad Uzairさんのポートフォリオサイト。色鮮やかで美しいグラフィックに、JavaScriptによるダイナミックなユーザーインターフェイスを合わせています。今回はこのサイトから参考にさせてもらいましょう。 今回のお手サイト:『Cosmive』 パキスタン在住のWebデザイナー、Muhammad Uzairさんのポートフォリオサイト。自身のプロフィール、手がけた作品の紹介、問い合わせフォームまで、1ページにコンパクトにま

    HTMLもCSSも書換不要!気持ちいいスクロール (1/5)
  • クロスブラウザ対応のための3つのFirefoxプラグイン

    出足好調な次世代ブラウザの陰で、Web制作者たちが表示チェックや互換性の確保に苦労している――。先日、そんな情報をお伝えしたが(関連記事)、Web制作者がクロスブラウザ対応を進める上で重宝しそうなのが、「IE View」に代表されるFirefox用のプラグインだ。 Web制作者に限らずすでにご存知のユーザーも多いと思うが、IE ViewはFirefoxからIE(Internet Explorer)を起動させるプラグイン。IE Viewを導入済みのFirefoxで右クリック→「IEで表示」を選ぶと、すぐさま該当するURLを渡してIEが起動、同じWebページを表示してくれる。非常にシンプルな動作ではあるが、いちいちIEを起動しなおして、URLをコピー&ペーストする手間を考えると快適だ。 IE Viewのほかにも、類似のプラグインとして、FirefoxからOperaを起動させる「Opera Vi

    クロスブラウザ対応のための3つのFirefoxプラグイン
  • jQueryで作る“Amazon風”インターフェイス (1/5)

    「最近、どこでよく買い物していますか?」――こう聞かれて「Amazon!」と答える方も少なくないかもしれません(特に誌読者であれば)。当初は書店の店頭で入手が難しい書籍の購入などに重宝していたAmazonですが、取扱商品が増えた今では、ペットボトルの水からパソコンまで何でも買える便利なECサイトとして、ネット利用者の生活に定着しました。 もっとも、Webサイトを作る立場から見ると、Amazonの魅力は品揃えやサービスだけではありません。Webサイトのデザイン面からAmazonを見ても優れた点は多数あり、実際、国内外の非常に多くのECサイトがAmazonをお手にしたUIを採用しています。今回は、「Amazon.co.jp」を参考にさせてもらいましょう。 今回のお手サイト:『Amazon.co.jp』 米アマゾン・ドットコムの日法人アマゾンジャパンが2000年から運営するECサイト。現

    jQueryで作る“Amazon風”インターフェイス (1/5)
  • 夏の50連発!! これが定番iPhoneアプリだ(前編) (1/5)

    iPhoneの発売と一緒にオープンしたiTunes Storeの「App Store」。さまざまなサードパーティー製アプリを組み込んで、iPhoneを自分好みにカスタマイズできるとあって、あれこれ試してみた人も多いだろう。 今回はヘビーにiPhoneを使い込んでいるライター/編集者にアンケートを取り、実際に使っていたアプリの中から魅力あふれる50を厳選。「ネット」「音楽・画像」「情報管理」「ゲーム」「その他」の5ジャンルに分けて紹介していく。前編では、以下にズラリと並んだ27個を取り上げよう(アイコンのクリックでソフト紹介に飛びます)。ソフトのインストール方法などを紹介したこちらの記事と合わせて、ぜひiPhoneをフル活用してほしい。 ※初心者向けのiPhone記事をこちらで連載しています。 ネット

    夏の50連発!! これが定番iPhoneアプリだ(前編) (1/5)