ヴォラーレ株式会社と申します。弊社はクライアントのWebサイトでSEOを基本としたコンサルティングを担当しています。コンサルティングを行うなかで「SEO＝外部リンク購入」などSEOに対する誤った認識をもつ人がいまだに多いことを痛感し、セミナーやメディア寄稿を通じて正しいSEOの啓蒙活動しています。 ここではWebデザイナーやWebディレクターといったWeb制作に携わる方々に向けて「Webサイトの設計とSEOはセットで考えなければならない」といったことを理解いただけるように、最新の“SEOの基本的な考え方について”をご紹介いたします。 ■CONTENTS

Webデザイン 1-11 表示領域に合わせて可変するリキッドレイアウト リキッドレイアウトとは、ブラウザの表示領域に合わせてコンテンツの幅・位置を可変で表示させるもの。表示環境による違いを最適化し、スマートフォン対応などにも有効だ。 制作・文／栗林 宏之 B's StuDio Browser IE 7over Firefox 3over　Safari 4over 01 リキッドレイアウト（可変グリッド）とはブラウザの幅に合わせてコンテンツの表示範囲（位置）を変えつつ、解像度の違いでユーザビリティを損なわないように最適化したレイアウトを維持する表示方法である【1-1】。 【1-1】ブラウザ幅に合わせてコンテンツの表示領域も変わるのがリキッドレイアウト。 02 基本は幅の指定を相対値で指定することとなる。2カラムレイアウトを例にすると【2-1】、まず全体を含むid［wrapper］にブラウザに

WordPressで一般的なよくあるブログを作成する際、記事のフォーマットはひとつで、そのフォーマットで記事を投稿していく場合が多いと思います。しかし、ビジネスサイトの作成では掲載にする内容によって見せ方が変わりますので、複数のレイアウトのフォーマットが必要になってきます。そこで、通常の静的なHTMLでサイトを作るように、サイト全体の構造をしっかりと把握できるサイトマップや、それぞれのページのURLを管理できるようにして、WordPressのサイト構築をしていくとわかりやすくなります。 解説：（有）ムーニーワークス　ハヤシユタカ 今回作成したサンプルサイトでは、サイトの更新情報として「ニュース」という分類の中に「お知らせ」と「セミナー情報」というサブカテゴリーを作り、製品紹介をする「製品情報」として「製品A～D」というカテゴリーを設けました。 これにより、カテゴリー自体の増える可能性を持ち

今回は記事の投稿時にHTMLなどを記述する必要がある際でも、だれでも簡単にできるように投稿作業を便利にするカスタマイズ方法をいくつか紹介していきたいと思います。投稿画面内にもスタイルを適用される「editor-style.css」の設定方法や投稿時の自由に入力したい情報をボタンとして投稿できる「AddQuicktag」やビジュアルエディタのボタンを拡張する「TinyMCE Advanced」の使い方を見ていきます。 解説：（有）ムーニーワークス　ハヤシユタカ WordPressではスタイルシートは基本は「style.css」に記述して作業していきます。記事を投稿する画面上では、何もしないとそのまま原稿や画像がそのまま表示されてしまいます。 Webデザイナーの人達はそれで全く問題ないですが、運用を担当されるWeb系以外の方ですと単純な文章だけの日記的なページ以外に、少し複雑なコードになると投

HTML5ではセクションという新しい要素が追加されている。これでマークアップをしていけば従来までhnタグを用いて行われてきたセクショニング【1-1】を、より明確にすることができる【1-2】。ちなみに、前者を暗黙的、後者を明示的セクショニングといい、セクショニングされたコンテンツ構造を「アウトライン（階層構造）」という。 ひとつ注意する点は、ここでいう構造とはレイアウト的な構造ではないということだ。レイアウト目的ならば従来のようにdivで指定していく必要がある。 【1-1】暗黙的セクション。セクションと明示はされていないがh1〜h6要素を使うことによって実際はセクションが設定されている 【1-2】明示的なHTML5のセクション。section要素を利用して項目の範囲を明示している。hn要素は各セクションの見出しを構成することになる body要素 メインコンテンツのセクション。いままでと変わら

サイトのデザインに光と影を感じさせるときは、まず光源を明確に意識してみよう。画面上部から光が当たるのか、下部から照らし上げるのかを定義することで、 細かいパーツのハイライトやシャドウの方向が決まる。１つ１つのパーツの処理に理由があることが何よりも重要だ。光源は見えない場所に設定するだけでもよいが、あえて画面内にスポット的な光源を表現することで、そのスポットが当たるキャッチコピーや商品をより印象的に見せることができる【1-1】。 【1-1】視覚的にスポットライトのような演出を当てることで視線を誘導し、更にサイト全体の光と影の方向を決定づける 続いてハイライトについて考えてみよう。ハイライトは物体の、より光源に近いエッジ部分に現れる。Webデザインでは文字を読むことを主な目的としているため、 極端に立体的でユーザーの方向に盛り上がった表現は少ない。厚みのない物体を想定した場合、ハイライトはエッ

プロジェクトフローの 再確認 Web制作の現場を全面的に取り仕切るWebディレクターにとって、点在する不安要素をひとつひとつ解決して、現場を安定させていくことは大きなテーマとなる。これまでヒアリングとクレーム対応について述べたが、クライアントとの関係を円満にし、よりスムーズにWeb制作現場を仕切るうえで、ぜひ意識してもらいたいのが「プロジェクトフロー」への取り組みだ。 プロジェクトフローとは「プロジェクトの流れ」を意味するものだが、Web制作においては「Web制作案件の進行を先読みするもの」と言い換えられる。それぞれのWebディレクターの立場や状況によって異なると思うが、下図で読者自身のプロジェクトフローも一度再確認してほしい【3】【4】。 ここで押さえてもらいたいのは、プロジェクトフローを整備することで、案件の進行がスムーズになるということだ。実際に自分自身の扱うプロジェクトフローを書き

Web制作が楽しくなるCSS3/JavaScriptのテクニック50 - 海外デザイン事情第6回 新規会員登録 ログイン管理 Twitter facebook はてなブックマーク RSS 2024.6.23 SUN 第6回「Web制作が楽しくなるCSS3/JavaScriptのテクニック50」 2010年02月15日 ブラウザ対応が進み、本格普及が間近となったCSS3。海外ではすでに多くのCSS3を使ったデザインテクニックが公開されている。ここではSmashing Magazineに掲載された「50 Brilliant CSS3/JavaScript Coding Techniques」をもとに、CSS3に関する海外の最新テクニックを紹介しよう。 翻訳元サイト：Smashing Magazine http://www.smashingmagazine.com/ 原文：50 Brillian

text-shadowはその名のとおり、テキストに影をつけるプロパティだ。うまく使えば画像を使わずとも、テキストを際立たせることができる。運用の効率化や、テキストコピーができるなどメリットも多い。 基本的な指定方法は、テキストから影までの距離（縦、横）とぼかしサイズ、影の色を指定して調整する【1-1】。CSS3でよく使われる、-moz-や-webkit-などのベンダープレフィックスの記述は、textshadowでは必要ない。カンマで区切れば、1つの要素に対して複数の影を指定できる【1-2】。また、影の色はrgba（半透明）で指定することもできる。影を半透明にしておけば、どのような背景色でも自然になじませることができるので便利だ【1-3】。 【1-1】「ぼかしサイズ」と「影の色」は省略可能 【1-2】カンマ(,)区切りで複数指定できる。工夫次第で複雑な表現も可能だ 【1-3】カラーコードをr

web creators／MdN Design Interactive共同企画 デザイン現場の目線で“リアルに語る” 実践! WEBビジュアルデザイン Webデザインに必要な知識や考え方は、普遍的なものもあれば、案件やクライアントによって変化する部分もある。PCやネットの技術やトレンドの変化によっても変わっていく。そのような知識や考え方、取り組み方を学び、考えるうえで大事なことは、現場で役に立つ、実践的でリアルな知識を得ることだ。 そこで本連載では、Webデザインの現場で役に立つ、実践的なWebビジュアルデザインのトピックや考え方、取り組み方について考えていく。 ■CONTENTS

Webデザインには、どんなにビギナーだったとしても、プロのWebデザイナーを名乗る人がやってしまうと恥ずかしい“マナー”ともいえる制作上のルールがあります。「知らなかった」、「教わっていない」では通用しません。なぜなら、アナタはプロなのですから。 そんな超基本の“Webデザインのお作法”を50個選定し、サイト設計、テキストデザイン、画像と色彩、レイアウト、その他の5つのテーマ別に解説していきます。この特集を通して、“Webデザインのお作法”をしっかり習得、あるいは復習して、カンペキに身に付けてください。