会員限定サービスです 月額プランが10月末まで無料 お申し込み 会員の方はこちら ログイン 日経クロステック TOPページ
会員限定サービスです 月額プランが10月末まで無料 お申し込み 会員の方はこちら ログイン 日経クロステック TOPページ
サービス終了に関するお知らせ いつも「Toypark無料ホームページホスティング」をご利用いただきありがとうございます。 「Toypark無料ホームページホスティング」は2019年12月20日をもちまして、サービスを終了させていただきました。 長らくのご利用、誠にありがとうございました。 運営:トイパーク株式会社
ブラウザーによって差異の出るWebページの表示テストを効率化したいWeb制作者に朗報だ。マイクロソフト製のブラウザーテストツールが、3月に米国で開催された“MIX09”(関連記事)で発表された。現段階ではInternet Explorer(IE)6~8の表示テストが可能で、正式版ではFirefoxやSafariもサポートする計画だという。 新ツールの名前は、「Expression Web SuperPreview」。現在、最初のプレビュー版「Expression Web SuperPreview(March Preview)」が、同社のブログで公開されている。正式版は、Webオーサリングツール(Dreamweaverの対抗製品)の次期バージョン「Expression Web 3」に同梱される予定だ。 このSuperPreviewを使えば、通常は共存できない、異なるバージョンのIEレンダリン
FlashでもAjaxでもない。シンプルで機能的なWebサイトへ――。ユニクロの公式サイト「UNIQLO.COM」(http://www.uniqlo.com/jp/)が3月26日にリニューアルした。従来のキャンペーン情報中心から、商品紹介とECを中心としたサイトへ転換。商品購入ページへダイレクトに飛べるようになった新しいトップページは、それまでの派手なFlashアニメーションが姿を消し、画像とHTMLのみで表現されたシンプルかつインパクトのあるデザインに一新された。 旬の商品がすぐ見られる・買える「シンプルで超合理的なデザイン」へ 新しい「UNIQLO.COM」のコンセプトは、「シンプルで超合理的なデザイン」(ユニクロ)。ユニクロの商品そのものにも通じるこのコンセプトは、「最新のトピックが一目で変わり、欲しい商品がすぐに買える」サイトデザインによって、具現化されている。 以前のUNIQL
WordPressやMovable Type(MT)など、無料あるいは低価格なブログ/CMSが急速に広まったおかげで、Webサイトの維持・更新はずいぶん楽になった。以前はスタティックなHTMLの個人サイトを日々更新していたが、今ではすっかりそれらのブログ/CMSに移行した、という人は多いだろう。 ところが、始めのうちは便利に感じたツールでも、使い続けていると、「編集画面が狭い」「画像の登録が意外に面倒」といった、使い勝手に不満を感じることがある。 今回は、そうした不満をクライアント側の工夫で解消し、ブログ/CMSをさらに快適に利用できるようにするFirefoxのアドオンを3つ紹介しよう。どれもシンプルな機能を追加するものだが、痒いところに手が届き、一度使ったら二度と手放せなくなるものばかりだ。 ドラッグ&ドロップでファイルをアップロード 「dragdropupload」 多くのブログ/CM
FlashからJavaScriptへ――。ソニーグループのコーポレートサイトがJavaScriptを使って全面リニューアルされるなど(関連記事)、JavaScriptの勢いが感じられた。そんな2008年の年末にまた1つ、注目のWebサイトが国内で誕生していた。「榊田倫之建築設計事務所」のコーポレートサイト(http://www.sakakida.com/)だ。 細かな黒のチェック模様の上に浮かぶ、白いレクタングル。細いサンセリフのフォントで綴られた英文の会社名に、小さなテキストで示されたメニュー。そんなシンプルな榊田倫之建築設計事務所のWebサイトは、無駄な要素を極力削ぎ落とした“最小限”のデザインが印象的なサイト。今年2月に発表された「第4回JWDA WEBデザインアワード」(主催:日本WEBデザイナーズ協会)では、奨励賞に選ばれた。 このサイトの主役は、同サイトのオーナーである建築家・
コンテンツの魅力を引き立て、十分に伝えるためには、時には“一歩引いた”Webデザインがいいケースもあります。たとえば、自身が手がけた仕事を紹介するデザイナーのポートフォリオサイトがそうかもしれません。ポートフォリオサイトそのものを作品と見なして、凝ったビジュアルデザインを作り込むこともできますが、過去に手かげた作品が豊富であれば、それらの個性を生かすシンプルなデザインもいいでしょう。 スイスのデザイナーユニット「Contreforme」のポートフォリオサイトは、後者のアプローチ――各々の作品を引き立たせるサイトデザイン――を採用しています。ただし、それだけではありません。このサイトが採っているもうひとつの手法が、アニメーション/エフェクトによる楽しい演出です。今回はこのサイトの技に注目してみます。 今回のお手本サイト:『Contreforme』 企業のCI策定やグラフィックデザイン、Web
2008年春に「Twitter」の日本語版が登場し、“ミニブログ”と呼ばれるサービスが日本でも本格的に広がり始めました。こうした中、Movable Typeの最新バージョン「4.25」に搭載されたのが、Twitter風のサイトを作れる「モーション」(Motion)という機能です。今回は、Movable Type 4.25を使って、Twitter風のサイトを作る方法を紹介します。 コミュニティ系機能を強化してきた「Movable Type 4.x」 ブログツールの1つとして多くのユーザーに使われている「Movable Type」(以下、MT)は、2007年夏にリリースされた「MT4」以降、企業向けのCMS(Content Management System)的な機能が強化されてきました。同時に、一方で拡張されてきたのが、コミュニティ系サイトを作るための機能です。 たとえば「MT 4.2」(2
「MT(Movable Type)は今、盛り上がっているのか?」 そんな疑問を抱えて、筆者は8月19日、丸の内カンファレンスセンターに向かった。シックス・アパートが主催する「第2回Movable Type Developer Conference」に参加するためだ。 3~4年前だろうか。ブログブームとともに日本でもMTが注目を集め始め、MTだけで構築されたWebサイトを目にする機会が個人/商用を問わず急激に増えていった。だが、ここ最近はWordPressに代表される他のブログツールの人気も高く、以前ほどMTの話題を耳にする機会も減ったように思う。だから今回のイベントで何より知りたかったのは、「MT(のユーザー)は今、どうなっているのか?」ということだった。 再構築が3倍速くなった「MT 4.2」 「Movable Type Developer Conference」は、MT開発者向けのカン
「プロが作ったWebサイトのあの“技”をウチのサイトでも(それもタダで)マネしたい!」――。そんな欲求に応えてくれる JavaScriptライブラリ/フレームワークが、ネット上にはたくさん公開されています。この連載では、国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンに、手間をかけずに自分のWebサイトをブラッシュアップしていく方法を紹介します。
「最近、どこでよく買い物していますか?」――こう聞かれて「Amazon!」と答える方も少なくないかもしれません(特に本誌読者であれば)。当初は書店の店頭で入手が難しい書籍の購入などに重宝していたAmazonですが、取扱商品が増えた今では、ペットボトルの水からパソコンまで何でも買える便利なECサイトとして、ネット利用者の生活に定着しました。 もっとも、Webサイトを作る立場から見ると、Amazonの魅力は品揃えやサービスだけではありません。Webサイトのデザイン面からAmazonを見ても優れた点は多数あり、実際、国内外の非常に多くのECサイトがAmazonをお手本にしたUIを採用しています。今回は、「Amazon.co.jp」を参考にさせてもらいましょう。 今回のお手本サイト:『Amazon.co.jp』 米アマゾン・ドットコムの日本法人アマゾンジャパンが2000年から運営するECサイト。現
「Webサイトを作るときに本当によく使う機能を、自分で作らずにさくっと実装したい」――。そんなワガママな願望をかなえてくれる JavaScriptライブラリが登場した。ミツエーリンクスが今月オープンソースとして公開した「MJL(MITSUE-LINKS JavaScript Library)」は、Webサイト制作に必須の“最小限の機能”に絞ったJavaScriptライブラリだ。 昨今相次いで公開されている、リッチなUIを実現するJavaScript/Ajaxライブラリとは異なり、MJLの機能はとてもシンプルだ。もともとWeb制作会社であるミツエーリンクスが「自社標準ライブラリ」として作成したものだけあって、汎用性・実用性を重視したライブラリになっている。 具体的な機能は以下の6つ。確かにどれもよく使いそうなものばかりだ。 画像のロールオーバー Flashオブジェクト埋め込みの機能拡張 新規
ブラウザーいっぱいに広がる鮮やかなグラフィック。フェードインでゆっくりと出現する写真画像。スクロールしながら画像に重なっていく半透明のテキストボックス――思わず見とれてしまう、キャンペーンサイトなどでおなじみの“派手なWebサイト”は、フルFlashが一般的だ。「Flashはよく分からないし、そもそもオーサリングツールもない」という個人サイトの制作者はあきらめるしかなかった。 パリ在住のフリーコンサルタント/Webデザイナー「Sebcreation」のWebサイトは、そんな常識を打ち破ることに挑戦している。まずはトップページを見てみよう。 おなじみのローディングアイコン、上下右左から次々とスライドしてくる半透明のテキストボックス……といったダイナミックなデザインに、「またFlashか」と思わずつぶやいてしまうかもしれない。ところがSebcreationでは、アニメーション/エフェクト処理を
本格的なWebデザインに取り掛かる前に作るプロトタイプ。特に受託サイトの制作やチームで制作する場合にはある程度きっちり作っておきたいものだが、「なかなかちょうどいい作成ツールがない」という人も少なくないのではないだろうか。 FireworksやillustratorからVisio、PowerPointまで、プロトタイプの制作に使えるツールはいろいろあるが、今回は無償で使える便利な専用ツールを紹介しよう。それが、オープンソースの「Pencil」だ。Firefox 3のプラグインとして動作するものだが、実際の使い勝手としては独立したアプリケーションのように動く。 使い方は簡単だ。インストールが済むと、Firefoxの[ツール]に[Pencil Sketching]という項目が追加される。Pencilの起動はここをクリックしよう。 プロトタイプを作るための基本操作は、左側に並んでいるGUI部品を
普段あまり目にしないようなインパクトのあるサイトを作りたい。そんなときにはいつも見ている日本国内のWebサイトだけでなく、海外サイトに目を向けてみるといいかもしれません。これまでにもこの連載ではいくつかの海外サイトを紹介してきましたが、今回見つけたのはアルゼンチンのWebサイトです。 「Sikker」という名前のサイトは、Webデザイナー・Nicolas Calabreseさんのポートフォリオサイト。1ページのみ、スクロール無しの“1枚絵”のようなごくごく小さなサイトですが、その分、CSSやJavaScriptの小技を効かせて、カッコよく楽しいサイトにデザインされています。今回は、このSikkerをお手本とさせてもらうことにします。 今回のお手本サイト:『Sikker』 アルゼンチンのWebデザイナー、Nicolas Calabreseさんのポートフォリオサイト。グローバルブランドのロゴが
Webページに掲載する面倒な表(テーブル)の作成を楽にしたい――。以前、本サイトではExcelファイルを簡単にHTML(Tableタグ)に変換するExcelアドイン「XLS2HTMLTable」を紹介した(関連記事)。XLS2HTMLTableはとても便利なツールだが、それでも表が大量に必要な時にはやはり手間がかかる。 今回はさらに楽をできて便利なアイテムを紹介しよう。それが、CSVファイル(カンマ区切りテキスト)を読み込み、Tableに整形して表示するJavaScriptライブラリ「jquery.csv2table.js」だ。 JavaScript関連の著書も多い高橋登史朗氏が作った「jquery.csv2table.js」は、名前のとおりjQueryのプラグインとして動作するもので、HTMLにわずか数行のスクリプトを書き加えるだけで使える手軽なライブラリだ。さっそく実際にjquery.
「優れたCSSレイアウトのマークアップを研究したい」「制作途中のWebページの表示不具合の原因を探りたい」――そんなときに使えるツールといえば「Firebug」や「Web Developer」がおなじみだ。これらのツールはCSSや(X)HTMLの確認だけでなく、その場で編集したり、JavaScriptのデバッグもできるスグレモノ。だが、もっと最低限の機能だけを手軽に使いたい、というケースもあるだろう。 (X)HTMLの構造やCSSのプロパティのチェックに特化したシンプルなツールが「XRAY」だ。Webブラウザーに登録して使うJavaScriptブックマークレットのXRAYは、アドオンをインストールする必要もなく、機能が絞られている分、動作も軽快だ。 事前準備は、作者・Westcivのページにアクセスし、「XRAY」と書かれたボタンをブックマークに登録するだけ。FirefoxやSafariな
Webデザインの世界で著名なブログ「Web Design Wall」が年末恒例の「Best of CSS Design 2008」を発表した。同ブログの姉妹サイトである「Best Web Gallery」の中から、CSSレイアウトの優れたWebサイトを全部で50サイト選出。こちらのエントリで画面ショット付きで紹介している。 選出されたサイトの一覧はぜひ元エントリを参照していただくとして、ここでは50サイトの中から特徴的なデザインのサイトと、共通する傾向をピックアップして紹介しよう。 JavaScriptでアニメーション&エフェクト 今年に限ったことではないが、多くのサイトで何かしらの形で使われていたのが、JavaScriptだ。中でも、画像の拡大にLightbox系(ページを遷移せずにオーバーレイ表示)の効果を使ったり、ページ内リンクにスムーズスクロールを取り入れるのは相変わらず人気のよう
「オリジナルのWebデザインをしたいけど、いまいち配色センスがなくて困る」「いつも好きな(得意な)色の組み合わせばかりでデザインしてしまう」「でも色彩理論を勉強するのは面倒だ」。 そんな人にぜひおすすめしたいのが、アドビ システムズが提供しているオンラインサービス「Adobe Kuler」(クーラー)だ。Kulerは、さまざまな色の組み合わせ(配色パターン、Kulerでは「テーマ」と呼ぶ)をWebブラウザー上で作成し、保存・公開もできる、ちょっと変わったサービス。いわば“みんなの力”で作られたカラーチャート集ともいえるもので、すでに7000種類以上(2009年1月現在)ものテーマが公開されている。利用料は無料だが、保存などの機能を使うにはAdobe IDが必要だ(以降の説明はログインしているものとして進める)。
表示形式で特定の文字を自動入力 文字にも表示形式は設定できる。表示形式を使って、氏名に「様」を付けたり、郵便番号などのパターンの決まった数字の入力をしたりといった作業をスピードアップ! 「様」や郵便番号の「-」(ハイフン)を自動表示 文字データに表示形式を設定すると、入力の手間を省くことができます。たとえば顧客名簿などを作成するときに、指名に自動的に「様」が付くようにすれば、大量のデータ入力が楽になります。 また、以前は数字の先頭の「0」を表示するために「'」(シングルクォーテーション)を付けましたが、「文字列」にすることでも「0」は表示できます。いちいち「'」を入力するより楽です。 Excel 2003からは「郵便番号」という表示形式もできました。数字だけ入力すれば「-」が挿入されます。 なお、表示形式で「様」や「-」を付けても、それは表示されているだけで、セルに入力したデータそのものに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く