いま、見ておきたいウェブサイト 第68回Kern Type, the kerning game、Designspiration、O'Neill Illusion 秋本番の肌寒さを感じながら、「いよいよ温かい食べ物、飲み物の美味しい季節の到来だな」とにんまりとしている今日このごろ、皆様いかがお過ごしでしょうか。今回も個人的に感じた、素晴らしいサイトの特徴をいくつかお話したいと思います。 あなたのカーニングセンス、教えます Kern Type, the kerning game タイポグラフィの基本である欧文書体のカーニング（文字詰め）を、ゲーム形式で楽しめるウェブサイト『Kern Type, the kerning game』です。 図1 ゲーム形式でカーニングを『Kern Type, the kerning game』 credit：Mark MacKay ゲームを始めると、画面中央に不
「Chrome+HTML5 Conference」のデザイントラックにおける羽田野太巳氏（HTML5.JPを運営）のセッションでは、「HTML5はHTML4と比較すると新しい機能が数多く実装されており、多くのブラウザがこれに対応している。だからこそ開発者/デザイナーは、旧要素も含めてすべての要素に目を通してほしい 」と訴えかけました。 羽田野氏はHTML5に関する最新情報や、チュートリアルおよび仕様の日本語訳を自身のサイトで積極的に公開するなど、国内におけるHTML5の普及/促進を進めてきた中心人物のひとりです。今回のイベントにはHTML5ビギナーも多く参加していたのですが、HTML5のエキスパートである同氏が、これからWeb開発の世界に入ろうとする人にこそ知っておいてもらいたい「HTML5マークアップの心得と作法」について解説しました。以下、その概要をお伝えします。 最初に羽田野氏は、
週刊Webテク通信 2011年5月第2週号1位は、特定のレンダリングエンジンでしか使えない実験的なCSSプロパティいろいろ、気になるネタは、グーグル、Chrome Web Storeの日本語サイト開設 ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2011年5月9日～2011年5月15日の間に見つけた記事のベスト5です。 1. The Future Of CSS: Experimental CSS Properties - Smashing Magazinehttp://www.smashingmagazine.com/2011/05/11/the-future-of-css-experimental-css-properties/ 特定のレンダリングエンジンでしか使えない、実験的なCSS
週刊Webテク通信 2011年4月第3週号1位は、Photoshopでピクセル単位できっちり回転・ペースト・移動させるテクニック、気になるネタは、アドビからiPad用開発ツール「Photoshop Touch」が登場 ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2011年4月11日～2011年4月18日の間に見つけた記事のベスト5です。 1. Pixel Perfection When Rotating, Pasting And Nudging In Photoshop - Smashing Magazinehttp://www.smashingmagazine.com/2011/04/14/mastering-photoshop-pixel-perfection-when-rotati
週刊Webテク通信 2011年4月第2週号1位は、ECサイトの決済画面のガイドライン、気になるネタは、iPhoneやAndroid端末で「tilt」とググると？ ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2011年4月4日～2011年4月10日の間に見つけた記事のベスト5です。 1. Fundamental Guidelines Of E-Commerce Checkout Design - Smashing Magazinehttp://www.smashingmagazine.com/2011/04/06/fundamental-guidelines-of-e-commerce-checkout-design/ ECサイトのチェックアウトのプロセスに関する基本的なガイドラインです。
週刊Webテク通信 2011年4月第1週号1位は、色に関するユーザーエクスペリエンスと心理学、気になるネタは、アマゾンにも独自の「いいね」ボタンが導入 ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2011年3月28日～2011年4月3日の間に見つけた記事のベスト5です。 1. The User Experience And Psycholgy Of Colour | SpyreStudioshttp://spyrestudios.com/the-user-experience-and-psychology-of-colour/ 色に関するユーザーエクスペリエンスと心理学についての記事です。 実際のサイトの例を挙げて、色とユーザーエクスペリエンスとの関わりについて説明しています。 フォーム
マイクロソフトが運営している「Webアプリケーションギャラリー」というWebサイトでは、WordPressやGeeklogなど、さまざまなオープンソースソフトウェア（OSS）が公開されています。WebMatrixでは、公開されているOSSをインストールし、簡単にWebサイトを構築することができます。WebMatrixには、前回説明したように「HTMLやPHPのファイルを編集する機能」も搭載されているので、OSSを利用してWebサイトを構築した後、そのままカスタマイズを行うこともできるのです。 今回はオープンソースのブログ構築ソフトであるWordPressの日本語版を題材に、WebMatrixによる簡単なカスタマイズを行ってみましょう。ちなみに今回の記事は、WebMatrixがすでにインストールされている環境を前提に進めていきますので、まだインストールしていない方は、前回の記事を参考にインス
Winnyは、日本では誰でも知っている一番有名なソフトウェアの一つと言ってよいでしょう。しかし同時に、その本当の姿を知る人はほとんどいないとも言えます。 Webのここ10年の歴史を見ても、本当に画期的なソフトウェアやサービスは、有用性と同時に、例外なく多くの問題点を含んでいます。利用者が拡大し定着する過程においては、一時的に問題点が拡大し、批判を集めたものも多くあります。その問題点を継続的な努力で解決し続けることによって、社会に受け入れられてきています。 Winnyにおいては、開発者の金子勇さんが逮捕されたことで、そのプロセスが強制的に中断されてしまいました。その結果、多くの社会的問題を生んでしまったことは、みなさんもよく知っていると思います。 金子さんは、2009年10月大阪高裁の二審で無罪の判決を受け、最高裁での決着を待っています。今回は、その金子さんに、Winnyが本当は何を目指して
週刊Webテク通信 2011年2月第1週号1位は、Web標準技術でインタラクティブ性を持たせる4つの方法、気になるネタは、グーグル、「Android 3.0」（Honeycomb）の公式ロゴを発表 ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2011年1月31日～2011年2月6日の間に見つけた記事のベスト5です。 1. Bringing Interactivity To Your Website With Web Standards - Smashing Magazinehttp://www.smashingmagazine.com/2011/02/03/bringing-interactivity-to-your-website-with-web-standards/ Web標準技術
Webでも裁ち落としでインパクトを出せる DTPでは、1ページ内に写真を裁ち落としでページいっぱいに載せ、その上に文字を置くのは定番のデザイン。でも、Webでそれを表現するのはなかなか難しいものです。ユーザーによってディスプレイの解像度や利用するブラウザが違うためです。 現在、多くの解像度やブラウザに対応できるように、widthを固定し、コンテンツをセンター配置にすることが多くなっています。その分、うまくフルスクリーンで表現できれば、することができれば、より一層かっこよさやインパクトを与えることができます。 今回ご紹介するのは、JavaScriptを使い、フルスクリーンで背景画像を表示する方法です。第6回「裁ち落としてインパクトのあるデザインを作るでも同じようなUIをご紹介しましたが、IE6で縦スクロールが出てしまうという欠点があります。オプションの充実度からも、今回のやり方のほうが使いや
Zenphotoは、お手軽にWebギャラリーを作れるオープンソースのCMSソフトウェアです。今よく話題を耳にするブログ/CMSプラットフォーム「WordPress」ととても似ている仕組みになっており、システムにPHPとMYSQLを用います。 最近のCMSはどれも便利で比較的簡単に扱える様になっており、扱いに慣れた人はシステムを拡張することで普通のブログをWebギャラリーとして公開していることも珍しくありません。 この連載でご紹介するZenphotoは、数あるCMSの中でも、次のようなCMSを探している方にはとてもオススメのWebギャラリーCMSです。 簡単にインストールするだけでWebギャラリーとして使えるCMSが欲しい flickrなどの画像投稿サービスを使わずに自分でギャラリー管理をしたい ギャラリーの見せ方を自分好みにカスタマイズしたい 第1回目はそのZenphotoの最新バージョン
はじめに 第2回の今回からは本格的にjsdo.it -Share JavaScript,HTML5 and CSS-（以下、jsdo.it）を使ってJavaScriptを勉強していきたいと思います。毎回お題編と回答編に分けてやる予定で、お題編では基礎知識を解説してそれに関連した課題を出し、それをjsdo.itでつくってもらい、回答編で解説するというかたちで連載を進めていきます。 今回はjQueryの基本のお題編ということで、jQueryの基礎を解説したあと最後にお題がありますのでそちらを次回までにやっておくとより理解が深まるはずです。 jQueryってなに？ そもそもjQueryとはなんでしょう。まったく知らないという人もいれば名前くらいは聞いたことがある、いつもJavaScriptを書くときは使っている、さまざまだと思います。今回は初回なので念のためjQueryとな何なのかというところ
週刊Webテク通信 2010年12月第3週号1位は、Webサイトを制作するときに考慮すべき60の事柄、気になるネタは、電子書籍を自炊できるレンタルスペースが開設 ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2010年12月13日～12月19日の間に見つけた記事のベスト5です。 1. 60 Questions to Consider When Designing a Websitehttp://sixrevisions.com/web_design/60-questions-to-consider-when-designing-a-website/ Webサイトを制作するときに考慮すべき事柄が疑問形でまとめられています。 プロジェクト管理のための15の質問 コードオーサリングのための15の
週刊Webテク通信 2010年10月第5週号1位は、透過画像を使ったCSSスプライト、気になるネタは、角川、電子書籍事業に本格参入 ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2010年10月25日～10月31日の間に見つけた記事のベスト5です。 1. Transparent CSS Sprites - Smashing Magazinehttp://www.smashingmagazine.com/2010/10/31/transparent-css-sprites/ 透過画像を使ったCSSスプライトの提案です。 CSSスプライトは、サイト上でよく使う矢印やアイコンなどの複数の画像を1枚にまとめたファイルを用意し、CSSを使って必要な部分だけを表示させるテクニックです。HTTPリクエス
高まる個人情報保護の気運 ビジネスでインターネットを利用するメリットとして、顧客と直接コミュニケーションを図れることが挙げられます。これにより、ダイレクトに商品を販売するショッピングサイトの運営やメールマガジンを利用した情報提供、会員制Webサイトによるユーザーサポートなど、さまざまな用途でインターネットは活用されるようになりました。ただ、こうした活動の多くは顧客の個人情報を取得することが前提になっているということには注意が必要です。 たとえば、ショッピングサイトであれば課金のために名前やクレジットカード番号、商品の送付先となる住所を入力してもらわなければなりません。メールマガジンの送付においても、最低限メールアドレスの入力は必要でしょう。会員制Webサイトであれば、IDやパスワードの管理が生じるわけです。 1980年、OECD（Organisation for Economic Co-o
週刊Webテク通信 2010年10月第4週号1位は、積極的に取り入れたい9つのCSS3（+jQuery）テクニック、気になるネタは、アップルスペシャルイベント「Back to the Mac」でいろいろなものが発表 ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2010年10月18日～10月24日の間に見つけた記事のベスト5です。 1. 積極的に取り入れたい9つのCSS3（+jQuery）テクニックhttp://webdesignrecipes.com/9-css3-and-jquery-techniques/ CSS3を使ったいろいろなテクニックを紹介したチュートリアル記事です。サンプルがどれも実践的で、親切に解説されています。 一部jQueryを使っていますが、基本的には全てCSSだけ
こんにちは、太田です。3回ほどJavaScriptの基礎的な内容が続いたので、今回はグラフィカルなアニメーションについて解説します。グラフィカルなJavaScriptというと、難しい・応用的なイメージがあるかもしれませんが、JavaScriptでのアニメーションとはすなわちCSSを段階的に操作するということで、そのポイントを抑えれば中身は単純なものです。 アニメーションの前提知識 HTMLにおける通常のアニメーションを構成するのは、「特定の要素」に対して、「そのCSSプロパティ」を「ある時点からある時点まで」の時間の中で、「ある値からある値に操作」する、といった要素です。 特定の要素と、CSSプロパティについては問題ないと思います。問題となるのは「時間と値の操作」です。 まず、単純にインクリメントするだけというサンプルを見てみましょう。 良くないアニメーション var y = 0;
いま、見ておきたいウェブサイト 第43回The Shodo、Swarmation :: The Pixel Formation Game、Twitter.com 汗ばむ季節が過ぎ去り、ようやく過ごしやすい陽気となったものの、猛暑の影響でイチョウの葉が焼け「今年の紅葉は大丈夫か」と心配している今日このごろ、皆様いかがお過ごしでしょうか。今回も個人的に感じた、素晴らしいサイトの特徴をいくつかお話したいと思います。 ブラウザで楽しむ“文字の美” The Shodo 日本の伝統芸術である「書道」を、ブラウザ上で楽しめるウェブサイト『The Shodo』です[1]。 図1 書道がブラウザ上で楽しめる『The Shodo』 credit：Business Architects トップページから「Write」を選択すると、実際の書道と同じように、マウスで毛筆を動かして紙の上に文字を書けます。毛筆の太さ
今回のゲスト、阿部昭敏君は、ずっと前に私の部下として一緒に仕事をしていた人です。今は「みんなのシフト表」というSaaS（Software as a Service）サービスを一人で開発し自営しているのですが、同時に「主夫」として家事や子どもさんの世話をしているという非常にユニークな働き方を実践している人です（編注）。 編注） 本インタビューはホテルグランドヒル市ヶ谷内の喫茶店「カトレア」で行いました。 「みんなのシフト表」とは 中島：本当に久しぶりですね。 阿部：ご無沙汰しています。お会いするのは17年ぶりですね。 中島：もうそんなになりますか。今日は、阿部君の働き方や生き方についてじっくり聞きたいんですが、まずは、「みんなのシフト表」について紹介してもらえますか。 阿部：はい、「みんなのシフト表」は、シフト勤務を管理するシステムです。店長の人がパソコンからシフトを登録して、バイト
週刊Webテク通信 2010年10月第2週号1位は、最近よく見かけるWebデザインテクニックとコーディング方法、気になるネタは、画像検索のGoogle GogglesがAndroidから1年遅れでとうとうiPhoneにやって来た ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2010年10月4日～10月10日の間に見つけた記事のベスト5です。 1. Five Useful Design Techniques and Coding Solutions For Web Designers - Smashing Magazinehttp://www.smashingmagazine.com/2010/10/07/5-useful-coding-solutions-for-web-designer
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く