運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します⁠。個別にライセンスが設定されている記事等はそのライセンスに従います。

こんにちは、吉田コマキです。Webサイトのリニューアルには、必ずと言っていいほどビジュアル面でのリデザインが行われます。その際に頭を悩ますのは、様々。情報の整理であったり、機能であったり、そしてカラーリングであったり。今回は、そのwebデザインの現場でkulerを活用する方法にフォーカスをあてて、ご紹介します。 リデザインを行う前に 今回は、今年3月にリニューアルした琉球新報社のWebサイトのリニューアルについてお話します。 琉球新報社のWebサイトは、約2年ぶりのWebサイトリニューアルにあたり、次の事柄を機能要件として洗い出しました。 現行のXOOPS活用をそのままに、機能拡張 コンテンツの基本指針の改革 そして、使いやすさとイメージアップ ここでは、技術的なことは割愛させていただいて、ビジュアル面でのリデザインを中心にお話していきましょう。 まずは、リニューアル前の配色を検証 いきな

こんにちは。吉田コマキです。第2回目になる今回は、kuler（クーラー）のインターフェイスを眺めながら、色理論のお話をします。 なにはともあれ、kulerを開いてみよう！ さて、いよいよkulerに触れてみます。まずは、kulerのサイトにアクセスしてみましょう。ここで注意してほしいのは、Flash Player 9以上のプレイヤーでないと表示しません。お持ちでない方はアドビシステムズ社のサイトにアクセスしてインストールを済ませてください。 kulerは現在のところ英語版のみですが、直感的に触れることができますので、ちょっとした単語を覚えていけば、すぐに操作に慣れることができます。 kulerのサイトが開いたら、画面の右上をご覧ください。「⁠Register」と「Sign In」の2つのリンクがあります。 図1　kulerのサイト。右上部に「Register」と「Sign In」の2つのリ

今日は、CSSを使ってサイトを高速化するテクニック「CSS Sprites（CSSスプライト⁠）⁠」についてのお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。実はCSSを上手に使うことによっても、サイトの高速化を行うことができます。しかも、かなりの効果が期待できるのです。 CSS Spritesとは？ 通常、ウェブページを制作する場合、デザインファイル（psdやpngなどの画像）をスライスし、HTMLのimg要素として埋め込んだり、CSSの背景画像として指定していることと思います。 それらの画像を一つにまとめ、１度の読み込みでのリクエスト数を減らすテクニックのことを「CSS Sprites」と呼びます。 このテクニックは、以前からマウスオーバーメニューを実現する際にも使われていたものでもありま

Webデザインに限らず、紙媒体、紙文書のデザインやプレゼンテーションのデザインに至るまで、見出し＋本文という組み合わせは非常に多く使います。 見出しは、文章のまとまりに対して要約した説明を示す役割があります（長い文章を全て読まなくても、本文におよそ何が書かれているのか判断するのを助けてくれる重要なものです⁠）⁠。 それではあらためて優れた見出しがどのようなものなのかを機能面・視覚デザイン面から再確認してみます。 私が考える「優れた見出し」とは 機能面： 長い文章であっても見出しを見るだけで話題の輪郭がつかめるもの。 情報量が膨大であっても、見出しをひととおり見るだけで全体像がつかめるもの。これは何もウェブサイトに限りません。例えば書籍の目次などが参考になるので例をあげると、優れた見出し（目次）であれば、すぐに目的のページへたどりつくことができる上、どのような本なのかをおよそ理解できます。

進化し続けるFlash 現在、Webサイト制作に関わる人々の多くは、Flashを採用したWebサイトの普及について好意的な印象を抱いているかもしれません。「⁠Macromedia FLASH 1」としてFlashが世に登場したのは1996年。以来、2002年の"MX"、'05年の"8"など、数々のバージョンを経て、2007年現在の最新版"CS3"に到るまで、Flashは絶えず進化してきました。 アクションスクリプトの高速化やサーバーとの連携強化は、Flashで制作された各種コンテンツを、立派な「商品」として利用できるレベルに高めています。ブロードバンドの普及やデバイスの進歩も手伝い、リッチなWeb体験をユーザーが享受しやすい環境になった現在、Flashを用いたWebサイトは安定した普及期に入ったと言えるでしょう。 SNSや動画投稿サイトなど、新しい形態のWebサイトが誕生している現状にも、

そもそもあなたは何をつくりたいのか この連載は、プログラム言語、特にウェブアプリケーションを開発するために必要なHTMLとサーバサイド言語を学んだばかりのビギナーを対象にしていきます。 それでは、そもそもあなたは、どうしてマッシュアップしようと思ったのでしょうか。 転職するためのスキルとして？ はやりだから？ 趣味？ この連載を読んでいるあなたは、ウェブアプリケーションといっても、既存のもののコピーではなく、これまでにない新しいものを開発したいと思っているのではないでしょうか。 そこでまずことわっておかなければならないのは、マッシュアップの手法について、コアな部分のライブラリが各所から提供されているために、お手軽さだけが強調されていますが、それゆえに、誰もがマッシュアップできるわけではないという点です。 マッシュアップするために、必要なのは、 「⁠何かをつくりたい」 ではなく、 「⁠これを

初回はWeb2.0の中核技術ともいえるAjaxを見ていきたいと思います。 Ajaxのセキュリティについて考えていきますが、その前にAjaxについて簡単におさらいしてみましょう。 AjaxとはAsynchronous JavaScript XMLの略であり、一言で言えばJavaScriptとXMLを使って非同期に通信するということです（XML以外の形式が使われることも多くなりました⁠）⁠。通信を非同期にすることで、何か処理をする場合にいちいち待たなくても次の処理に移ることができます。その結果、ユーザを待たせずに多くの処理を行えるようになりました。また、画面全体を再読み込みする必要がなくなったことも、使い勝手の向上した理由です。 Ajaxの動作 それでは簡単なサンプルコードでAjaxの動作を見ていきたいと思います（リスト1⁠）⁠。これらはAjaxの入門サイトや書籍で一番最初に出てくるコードです

Webデザインの話に入る前に、まずアートとデザインの違いについて考えてみます。 デザインとアートの違いは何か？ この疑問は、たびたびいろいろな場所で話題になっており、「⁠デザイン　アート　違い」などと検索すればいろいろな先人の考えを知ることができます。 目に見えるもしくは耳に聞こえる、肌で感じられるなど、必ずしも視覚的なものだけではありませんが、アートにもデザインにも共通する点は、「⁠表現」することだと考えています。 Webデザインで言えば、「⁠視覚ブラウザで見えているものだけがデザインではない」と考えれば、視覚的なものだけではないということがわかりやすいかと思います。 私が考えるアートとデザインの違い アート： 自分の中心からわき上がる感情などを自由自在に制約なく表現する （⁠鑑賞することで他者が共鳴したり感動することはあるが、他者の問題解決を目的としているわけではない） デザイン： 自

小飼弾のアルファギークに逢いたい♥ #6IT戦士 天野 仁史／こんにちはこんにちは！ Hamachiya2（中編）　はまちちゃんはいかにしてXSS/CSRFを見つけるか 天野 仁史さん、Hamachiya2さん（はまちちゃん）との対談の中編です。 編集部注） 本対談は2007年3月に行われたものです。 こんにちはこんにちは！ 弾：はまちちゃんはいつ頃から「こんにちは」に興味が出てきたの？ は：確かmixiを始めた2年前くらいかな。mixiってブログと違って、日記にコメントがたくさんつくのがおもしろくてハマってて。毎日見てるうちにおもしろい現象を見かけたんです。たまたま誰かが「ラーメン」ってタイトルの日記書いたんですよ。そしたらほかの人もつられて「ラーメン」って日記を書き出して、それがマイミクのマイミクまでどんどん伝染していっちゃって、その日の日記一覧が全部「ラーメン」になっち

多様化・高度化するWebデザイナーのお仕事 近年、Webデザイナーへ求められるスキルは多様化、そして高度化しています。 スキルを細かく分類しても、多岐にわたってしまうことがわかります。 Webデザイナーに求められるスキルを細分化する グラフィック（ビジュアル）デザインスキル (X)HTMLマークアップスキル 文書構造を適切に意味付けする CSS技術スキル HTML/CSSオーサリングソフト操作スキル 代表的なツール：Dreamweaver 目的にそって情報を配置（レイアウトやマッピング） インターフェースデザインを行うスキル 配色スキル JavaScript技術スキル Flashオーサリングスキル グラフィックソフト操作スキル 代表的なツール：Photoshop/Illustrator/Fireworks アクセシビリティ配慮のスキル ユーザビリティ配慮のスキル インフォメーションアーキテ

はじめまして。エスカフラーチェLLCのpurprinこと山田あかねです。 （⁠株）paperboy&co.で Webデザイナーを勤めて昨年12月で退社後、今年1月にエスカフラーチェLLCの設立に携わり、現在はデザイナーとして主に社内のWebサービスの開発を行っています。 最近ではCSS Nite in Nagoya 2007で「極力ハックしない CSS」というテーマでスピーカーとしてお話させていただきました[1]⁠。また、雑誌の記事を書くお仕事もしています。 この連載では「独学で極める Webデザインの技と心」というテーマで、前職で異業種だった私が独学でWebデザイン技術を習得したプロセスやノウハウなど、実体験を交えてお話させていただきます。 Webデザインの話となると、しばしば(X)HTMLやCSSなど技術の話がクローズアップされることが多いのですが、技術だけにとどまらず、実際に閲覧する