[ThinkIT] 第1回：Prototype.jsを使う準備 (1/2)
筆者がPrototype.jsに初めて出会ったのは、2005年9月ごろだったと思います。この頃、オブジェクト指向JavaScriptはまだまだ黎明期で、オブジェクト指向の書き方もさまざまな我流が存在していたことを覚えています。 もちろん、筆者も我流のオブジェクト指向で書いていました。しかし、すべてのエンジニアが我流の書き方をしていては、JavaScriptのオブジェクト指向は普及しません。 そんな時にさまざまなブログで取り上げられ始めたのがPrototype.jsでした。Prototype.jsにはクラスを定義するという機能があり、すべてのエンジニアが同じ方法でクラスを定義できるのです。それは、大きなインパクトでした。しかし、その当時Prototype.jsにはまとまったドキュメントが無く、目利きのJavaScripterたちはこぞってソースを読んでいました。 そして、そのことが図らずとも
[Think IT] MITでも使われているオープンソースのCMS (1/3)
PHPベースのオープンソースCMS「eZ Publish」 MITでも使われているオープンソースのCMS！ 著者：eZ Systems 豊島 麻里子 公開日：2008/1/7（月） 2008年1月の連載ランキング3位（一覧を見る） オープンソースCMSといえば？ オープンソースのCMS（コンテンツマネジメントシステム）というと何を思い浮かべるでしょうか？ 有名なところでは「Joomla!」や「XOOPS」があるでしょう。確かにこれらさまざまなWebサイトで使用されています。では、米マサチューセッツ工科大学（MIT）や米国海軍で使われているオープンソースのCMSをご存じでしょうか？ それが「eZ Publish」です。eZ Publishは仏ナショナル・ジオグラフィック誌や豪ヴォーグ誌、英・仏・伊エル誌などの出版メディアの公式Webサイトにも利用されています。 本記事では、MITや米国海軍
もう悩まない！ブラウザ互換
幅広いスキルが必要とされるWebデザイン制作 Webサイトの日々の技術進歩とともに、Webデザイン制作では幅広いスキルが必要とされるようになってきました。Webデザインという広い役割の中でも特に重要視されるのは次の3つのスキルになるでしょう。 1番目は、いわゆる絵を作るデザインのスキルです。この中にはもちろん見た目の美しさもありますし、Webサイトとしての使いやすさのユーザビリティ、情報へのアクセスしやすさのアクセシビリティ、またFlashコンテンツであれば軽快な動作やインタラクションなどといったものもあります。 2番目は、HTMLとCSSのコーディング技術が挙げられます。以前であれば、見た目のデザインを忠実に再現するコーディングが重視されていましたが、最近ではSEOの観点からも、Web標準に基づいたHTMLの文書構造化ができるマークアップ技術が不可欠になっています。 3番目は、プログラミ
[Think IT] 第4回：黄金比を信じますか？ (3/3)
Webデザイナは知っていた 第4回：黄金比を信じますか？ 著者：シンクイット制作部 公開日：2008/03/06（木） 黄金比をボタンに導入する Webサイトをデザインする上でボタンの存在は重要です。検索などから来たユーザにさらなる情報を提供するためのナビゲーションとして、すべてのWebサイトに導入されていると言えるでしょう。 それでは画像として作成されているボタンに、実際に制作しながら黄金比を導入していきます。 まず文字サイズを14px、マージンはその「1.618」倍の22.652pxを四捨五入して23pxとします。「23px−14px＝9px」となるので上下のマージンを9pxとします。左右のマージンは上下に対して「1：1.618」で計算すると14pxになりますの、これでシンプルなボタンが完成しました（図3上）。 これはすっきりとして、計算されたマージンが効果的に可読性の向上にもつながっ
[Think IT] 第4回：黄金比を信じますか？ (1/3)
Webデザイナは知っていた 第4回：黄金比を信じますか？ 著者：シンクイット制作部 公開日：2008/03/06（木） 黄金比は美しい？ 「第3回：フォントの扱いが命取り？」では、デザインの中でも重要な表現方法の1つである、フォントの扱いについて紹介しました。 今回は、デザインとして最も美しいとされる比率「黄金比」について紹介します。 黄金比とは、正確には「1：（1+√5）÷2」の計算式で表されますが、一般的には「1：1.618」の比率として使われています。 ピラミッドなどの建築物やモナリザなどの絵画が黄金比でできていることは有名ですが、それらは黄金比でできているからという以前に、芸術としてすばらしいと認知されているため、現実的に判断がしづらいものです。 筆者が原稿を書いているPCの周りのものを測ってみると、身近なものでいくつか見つけることができました。名刺やたばこのパッケージ、財布の中に
[Think IT] 第5回：バナー広告の作り方（前編） (1/3)
Webデザイナは知っていた 第5回：バナー広告の作り方（前編） 著者：シンクイット制作部 公開日：2008/03/13（木） バナー広告って何？ 「第4回：黄金比を信じますか？」ではデザインとして最も美しいとされる比率「黄金比」について紹介しました。 今回は、ニュースサイトやポータルサイトには必ず掲載されている、バナー広告の作り方について紹介します。 バナー広告とは、画像やアニメーションGIF、Flashで制作された、インターネット広告のことです。国内ではインターネット広告費がラジオ、雑誌を超え、そして新聞に迫る勢いで成長を続けています。海外では既に新聞広告費を超えた国があるほどです。 広告の中には、その商品に特化した記事を掲載したタイアップ広告や、ターゲットとなるユーザにピンポイントでメールを配信するターゲット広告などがあります。その中でもバナー広告はそのサイトを訪れたユーザの誰しもが目
[Think IT] 第6回：バナー広告の作り方（後編） (1/3)
Webデザイナは知っていた 第6回：バナー広告の作り方（後編） 著者：シンクイット制作部 公開日：2008/03/27（木） インプレッション効果とトラフィック効果 「第5回：バナー広告の作り方（前編）」ではニュースサイトやポータルサイトには必ず掲載されている、バナー広告の作り方について紹介しました。 今回は、さらにバナー広告の作り方について紹介します。 前回の最後に、インプレッション効果（広告メッセージや商品の認知）とトラフィック効果（クリックさせることで目的のWebサイトに遷移）を同時に意識させることで、トラフィック効果を上げることができたということを述べましたが、具体的には筆者はどのような方法を取ったのでしょうか。 内容を決める際の情報整理を行ったとしても、興味があまり持てない商品・サービスの内容を掲載したバナー広告ですと、もちろん興味をもってクリックしてもらえないでしょう。 そこで
ユーザーのためのWebデザイン
まずはユーザーを知る 前回（http://www.thinkit.co.jp/article/111/1/）は、iKnow!（http://www.iknow.co.jp/）サイト作成のためのツールや、プロセスについて紹介をしました。今回は、Webサイトのビジュアル・スタイルをデザインするための手ほどきとして、iKnow!サイトのクリエイティブの開発の中で、キーとなるデザインプロセスのより詳細な内容と、デザイン決定の理由づけについて紹介します。 Webサイトの新しいビジュアル・アイデンティティーをデザインするというチャレンジに直面した時に、良い選択をするための戦略があります。Webデザインは本質的にWebサイトとユーザー、そしてインターネットテクノロジーの間で、いかにフィットしたものを作るかというための意思決定のプロセスです。可能な限り、より多くの情報をプロセスの最初の段階から知っておくこ
テキストへの無理解が作業を増やす？
ほとんどの原稿は、タグを意識して作られない Webデザイナーにとって、HTMLなどのマークアップ言語は、普段から慣れ親しんだ文字列です。Web技術の中でも比較的メジャーな言語ですから、Web制作に携わったことがある人なら知っている人も多いでしょう。しかし、HTML内で表現するための文章をライティングする際にも、しっかりとこのマークアップ言語を応用している人は、ほとんどいないのではないでしょうか。 クライアント側の製品・サービス担当や広報担当といった原稿制作者はもちろん、Web制作に従事するWebライターやWebディレクターでさえ、Webページ用の文章を作成する際に、あとからマークアップすることを考慮していないことが多いようです。そのため、Webデザイナーに入稿される原稿の多くは、タグを意識して作られておらず、まるで、学生時代の作文のような1行タイトルと長い本文という原稿か、見出しばかりで本
情報の閲覧・活用の工夫とは？
情報の活用の利便性や楽しさをアップする 今回は、情報を閲覧したり、活用したりする際の工夫のヒントとして使えるフィーチャー＆ファンクションを紹介します。最近では、動画を取り入れるとか、ユーザーがデザインやレイアウトのカスタマイズができたり、情報を活用したり、管理をしたり、共有したりなど、よりリッチに、よりユーザーの活用自由度があがってきているといえるでしょう。もちろん、基本的なユーザビリティアップのための工夫も進化していますので、参考にしてみてください。 まずは、情報の活用の利便性や楽しさをアップするためのフィーチャー＆ファンクション例を3つ紹介します。 1つ目は、「写真を簡単にクリッピング」です。ワンクリックで一時的に情報をクリッピングする方法です。通常のお気に入りボタンをクリックする以外の方法として検討してみてもよいでしょう。ストックして後で再度見る情報と区別して、一時的に情報をクリッピ
データをインプットしてもらう方法とは？
ユーザーのデータインプット促進 どんなサービスを作る場合にもしっかりと考えなくてはいけないのが、「どうやってユーザーにデータをインプットしてもらうか」です。ソーシャルメディアであればユーザーのインプットがコンテンツの肝となります。Webサイトを利用したマーケティングを行いたい場合でも、ユーザーのプロフィール情報を得たり、Webサイト上で積極的な行動をしてもらうことが重要な成功のカギとなります。 ユーザーにインプットしてもらうためには、いかにユーザーを動機づけるかにかかってきます。すなわち、ユーザーが自然に「情報をインプットしたい」と思ってくれるような仕組みやインセンティブを用意するということです。 例えば、一般的なコミュニティーにおいては1％のリーダー、10％のフォロワー、残りの89％のユーザーをパッシブな閲覧ユーザーとして構成し、それぞれのプレーヤーの存在や行動が別のユーザーのインプット
[Think IT] 第3回：フォントの扱いが命取り？ (3/3)
Webデザイナは知っていた 第1回：エンジニアだって色にこだわりたい 著者：シンクイット制作部 公開日：2008/02/14（木） 言った言わないはナンセンス ある日、社内の広告営業の1人から広告バナーの制作依頼を受けました。 「お客様からご発注いただいたバナーのイメージをヒアリングしてきたので、打ち合わせをしましょう」 お客様からヒアリングしたメモを見ながら説明を受け、それを簡単に筆者がメモをしました。バナーを掲載する目的や伝えたいこと、誘導させたいページなどが主な内容でした。 早速作業に入り、出来上がったものをお客様に見せたところ、「内容も流れもデザインも問題ないけど、色は今までのページなどと変えて違う色を使ってほしいとお伝えしたのに」という返答でした。 原因は営業のヒアリングミスか筆者が聞きそびれたかにありますが、それを問題にするのはナンセンスです。このようなズレがなくなるように筆者
[Think IT] 第1回：携帯サイトとPCサイトはここまで違う！ (1/3)
XHTML Mobile Profileに対応したHTML 本連載では、「PCサイトを制作してきたけど、携帯サイトは初めて」といった企業や個人クリエイター向けにPCとモバイルの違いなどをふまえ、携帯サイトを公開するまでの入門的なノウハウを紹介していきます。 まず、今回はHTMLの種類やタグ、CSSなど携帯ブラウザによる違いと、画面サイズやキャッシュ容量などの端末による違いについて紹介していきます。 では、早速携帯サイトを作る上でマークアップの基本となるHTMLについて説明します（図1-1）。携帯電話はPCと比べても非常に早い進化を遂げてきたため、どれも基本はHTMLを基準に作られていますが、携帯ブラウザ（iモード、EZweb、Yahoo!ケータイ）で表示可能なHTMLの仕様には実に多くの種類が存在します。 現在市場に出回っている機種ということに限定すれば、XHTML Mobile Prof
[ThinkIT] オープンソース時代の企業システム選択ポータル
2024/8/11 オープンソースのアプリケーション開発フレームワーク「Flutter 3.24」「Dart 3.5」リリース 2024/8/11 「KDE Frameworks 6.5.0」リリース 2024/8/9 「Samba 4.20.4」リリース 2024/8/5 新しいカーネルが採用された「Arch Linux 2024.8.1」リリース 2024/8/4 エレコムの無線LANルーターに複数の脆弱性、JPCERT/CCが注意喚起 2024/8/3 オープンソースのコンパイラ「GCC 14.2」リリース 2024/8/3 プログラミング言語「Rust 1.80」リリース 2024/8/1 「Xen 4.19」リリース 2024/7/31 機械学習フレームワーク「PyTorch 2.4」リリース 2024/7/31 バージョン管理システム「Git 2.46.0」リリース
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[Think IT] 【これならわかる！JavaScript/Ajax】JSONなんて怖くない！
今から始める携帯サイト制作