タグ: SaCSS

SaCSS Vol.21

0002011年2月12日（土）に札幌市民ホール会議室で開催されたSaCSS Vol.21に参加しました。今回はWebデザインを制作するツールについて、Fireworksを中心にしたLTです。

FireworksでのWEBデザイン制作方法

FireworksでのWEBデザイン方法として、サンプルデータを元に実演での解説です。Fireworksの強みであるピクセルを正確に表現できる点、グラデーションなどの塗りの指定、効果の設定がプロパティパネルから行えるなど、WEBデザインに特化した機能を紹介されていました。やはりWEBデザインは今はFireworksなんですね。

タイポグラフィを3つのソフトで作り比べる

こちらは私が解説させて頂いた内容です。Photoshop、Illustrator、Fireworks、3つのソフトを使用するメリット、デメリットについてと、タイポグラフィを3つのソフトで実演しました。Photoshopは画像加工、Illustratorは文字などのレイアウト、FireworksはスライスなどWEBデザインに特化していていること、タイポグラフィという同じお題目で制作したデータがどのようにして作られたのか説明しました。時間の都合により一部カットした内容がありましたので、補完した物を当ブログにてアップする予定です。

PhotoshopでのWEBデザイン制作方法

サンプルデータを元にWEBデザインの方法を紹介。シェイプツールの活用方法、簡単なグラデーションのかけ方、レイヤースタイルの使い方やレイヤーのグループ化などPhotoshopならではの機能を解説されていました。直感的に綺麗なデータが作れるだけあり、違った魅力が語られていました。 次回は3月でLT祭りとのことです。 今回撮影した写真については、30days Albumにアップしています。ログインには毎回同じ言葉を使用しています。

URLの正規化

前回書いたパーマリンクからの続きとなります。サンプルソースを掲載する時間が無いので参考サイトを紹介しておきます。

URLの正規化

「他にやっておくこと」とは、まずURLの正規化です。URLを入力するとき、結果的に同じ場所を示していても、記述が違うと実際には「別なモノ」そして扱われます。そのため、URLの記述方法をルール化する必要があります。ルール化するものとして下記があります。
  • サブドメインwww
  • トレイリングスラッシュ（/）
  • index.html
例えば、「hogehoge.com」というドメインを取得したとします。URLは「http://hogehoge.com/」となります。ここに上記3つを付記しても、表示上では同じ場所に辿り着きますが、内部的には全て違う場所を指します。 wwwはサブドメインで、過去wwwを付けるのが一般的だった名残です。末尾のスラッシュ（トレイリングスラッシュ）は無くても自動で振られるようになっています。index.htmlはサーバー側のデフォルトで自動的に飛ばされるようになっています。 これらを統一させる方法は.htaccessで「301リダイレクト」させるのが一般的です。 301リダイレクト

canonicalの記述

次は、head内にcanonical（カノニカル）で、リダイレクトしたURLをソースコードから検索エンジンに対して適切に伝えます。canonicalはGoogle、Yahoo!、Microsoftの3社がURLの正規化のために2009年2月12日からサポートされたもので、「hogehoge.com」だと下記のようになります。 link rel=”canonical” href=”http://hogehoge.com/”

httpエラーページの適切な誘導

最後に、何らかの原因によりサーバーエラーが表示された場合のページについて。404エラーなどが有名ですが、通常は味気ないエラーページが表示されます。このページをサイトのページ構成したものと切り替えることにより、ユーザーに対して優しいページとなります。 しかし、全てのエラーページを一つにして良いモノでしょうか。サーバーエラーはそのエラー内容により種類があり、全て設定することはありませんが、基本的なケースを押さえておくとよりユーザーに優しいサイトとなるでしょう。 HTTPステータス・コード リダイレクト