January 20181 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

デザイン | マークアップ

JUGEMテーマ:写真


【WEBデザイン】

久々に更新のデザイン中継です。

やっとこさ、マークアップに入りました。
人によって全然作り方は違うと思いますが
私は、先にページのざっくりとした分類分けや
レイアウト分けをしながら先にHTMLで
マークアップをしていきます。

一番最初のhead部分のmetaタグはSEOで重要とされている
キーワードやページのディスクリプションと宣言程度しか
入れないようにしています。
昔はロボット見てね、とかキーワードも大量にどどーんといれてって
いう宣言だったり、ここに詰め込んだものですが
最近は結構シンプルにしてもきちんと考えたマークアップを
していれば、かなり検索でも上位にあがってくるようになりました。

デザインにもよりますが、私はほとんど
「head(上で記述しているhead部分とは異なって
bodyの中に自分で作る領域です。)」「main」「foot」という感じで縦わりをした後に
さらに細かくマークアップという形になります。

今日はheadの部分の初期のマークアップを・・・

<div id="head">
<h1><a href="http://photos-home.com/"><img src="shared/images/logo.jpg" width="210" height="142" alt="Photos-Home" title="Photos-Home" /></a></h1>
<ul>
<li><a href="index.html"><img src="shared/images/g_navi_top.gif" width="43" height="26" alt="TOP" title="TOP" /></a></li>
<li><a href="about/index.html"><img src="shared/images/g_navi_about.gif" width="54" height="26" alt="About" title="About" /></a></li>
<li><a href="diary/index.html"><img src="shared/images/g_navi_blog.gif" width="101" height="26" alt="Diary&amp;Blog" title="Diary&amp;Blog" /></a></li>
<li><a href="photo/index.html"><img src="shared/images/g_navi_photo.gif" width="92" height="26" alt="Photo" title="Photo" /></a></li>
<li><a href="life_hobby/index.html"><img src="shared/images/g_navi_hobby.gif" width="117" height="26" alt="Life&amp;Hobby" title="Life&amp;Hobby" /></a></li>
</ul>
<div id="head_main">
<img src="images/top_main.jpg" width="849" height="230" alt="" />
</div>
<!--END head_main-->
</div>
<!--END head-->

基本的にはLOGOをH1にもってきてPhotos-Homeという
検索で引っかかりやすいように構築。
さらにLOGOの部分のリンク先は相対パス(index.html)ではなく
絶対パスでリンクを貼ります。(http://photos-home.com/

最近個人的に気を付けているのが、
画像に「alt」指定だけでなく「title」指定をつけてあげる事です。
ただ、やみくもにつけるのではなくて、
・LOGO
・リストの部分
・見出し(h1〜h3までは最低でも)
上記の部分にだけつけています。

SEOの観点から見出しやタイトルはとても大切だと言われているためです。
まあ、本当の所・・・わかりませんが(汗
そして、逆に意味のない、あくまでも装飾としての画像にはaltは空で
指定してあげています。

この段階で、ページはできていなくてもリンク先を
指定して、サイトのディレクトリを決定していきます。

グローバルナビと言われているボタンたちは
リストタグで意味のあるタグをつけていきます。

今までは、BOX指定はほとんど<div></div>で囲まれたものが
主流でしたが、このdivさんは「ただの囲み」でしかないため
意味をなすコーディングになりませんでした。
これから主流となるであろうHTML5はこれが修正されて
マークアップの段階で、かなり意味のあるきちんとしたBOXの作成が
可能となります♪

divについては、あまりにも羅列してしまうため
</div>という終了がどれにかかるかわかりにくく
<!---->でコメントでヒントを書いてあげるのがマナーです。
(別にルールというわけではありません。)

ただ、なんとなく画像やテキストを流し込んでいくのではなく
きちんとひとつひとつに意味を込めて
マークアップをしていく作業がかなり大好きです。

今後HTML5になっていくとますますこういった
「考えてマークアップしてく」作業が楽しくなっていくんだろうな〜っと
心がうきうきになってしまいます(笑

次回はメインエリアのマークアップにうつります。

**********

現在本家サイトリニューアル中↓

デザイン | LOVE♪Fireworks

JUGEMテーマ:写真


【WEBデザイン】

Webに特化したFireworkはとにかくスライス業務が
とってもスムーズに行えます。

デザインを観ながら、スライスした画像の圧縮作業
画像の種類(JPEG、gif、png、アニメーションgifなど)、
画像の名前をつけたり・・・

一気に書き出しもできるし、画像のスライス部分をクリックして
右クリックから一枚一枚のスライスも可能。
photoshopの方が、正直画像の書き出しはきれいにいくのですが
その点も慣れてくるとFireworksでも綺麗な画像での
書き出しも可能です♪
JPGのみですが、一枚画像の中の一部の部分だけの圧縮率を
変更したりもできます。

あとはパーツの作りやすさもとても重宝します。
ちょっとしたボタンやバナーそ作るにはphotoshopより
簡単手軽にちょっと豪華なもの作ることができます。

↓本家サイトへのバナーも楽ちん。
photoshopで下のバナーを作るとなると
いちいち効果だけ(シャドー部分)でレイヤーわけになってしまったり
うすく見えるドットのテクスチャを別で作って登録したり
グラデーションの微妙な色合い調整に時間がかかったりと
幅内1ピクセルの白いラインを引くのがめんどくさかったり。

Fireworksだと、バナーも3分もかからずパパッと感覚だけで
作れてしまうので、photoshopより時間がかからず
ちょっぴり豪華(?)なものも作れます。

photoshop&イラレでWebサイトを作っていた際に一番
めんどくさく感じたのがビットマップとベクトル画像を行き来する事でした。
イラレでは綺麗に作ってもスライスするためphotoshopに
もってくると微妙にぼやんとした1ピクセルのぼやけた部分を修整したり
グラデーションが背景にかかった画像で上下に伸びる部分の
処理に困ったりしていました。

例えば下の簡単なテキストと画像のエリアわけのものがあるとして
コーディングをするとなった場合ですが・・・


簡単に見えるこのコーディング作業がちょっぴりめんどくさいと
思った方・・・正解です(涙

まずはテキストエリアの領域が下に伸びるため
背景のグラデーションの処理に工夫が必要になってきます。
ボタンの部分の背景の色と違和感なくつなげるために
背景のグラデーションをほんの少しだけ長めにとってあげなければいけません。
ボタンの部分は常にエリアの下に置いてあるレイアウトと考えると・・・

こんな単純そうに見える作業でもイラレとphotoshopを行き来・・・
Fireworksだと単純に背景の下の部分を引っ張って処理できるので
手間を考えたら、かなりの時間の短縮となります。

コーディングの事を考えたら、簡単なテキストエリアを上のような
デザインであげてくる事がそもそもコーダー泣かせなのですが(汗
これで背景に凝ったデザインをもってこられたら一枚画像にするか
フォントのサイズをきっちり固定して逃げます・・・私(汗

コーダーさんによってコーディングの仕方も
ファイル名の一つをとっても違うのもまた楽しい所・・・
上の画像をコーディングするとしたらどんな風に皆さんがするのか
ちょっと気になってきてしまいます。

次回はマークアップに入っていきたいと思います♪

**********

現在本家サイトリニューアル中↓

デザイン | スライス作業

JUGEMテーマ:写真


【WEBデザイン】

デザインができたら、今度はコーディングに移っていきます。

デザインとコーディングは別物だと思ってる方も多くて、
仕事によってはデザインとコーディング作業が別の時もあります。

でも、私の考えとしては、WEBデザインは一枚のデザインでは無いので、
「サイト作成の目的」「動きのある素材の定義」「ページ構成」などの
考えが必要だと思っているので他の方のデザインをコーディングする時程、
大変だと思えてなりません…涙

コーディングはただWEBで見られるための作業ではなくて、
センスや奥深いものは、デザインと同様とっても大切だと思います。
そのため、デザインをやりながらコーディング作業の事も考えています。
 
ちなみに今回のサイトの目的は「自分好きな世界を詰め込む箱作り」。

サイトを見ただけて、私自身の好きなものが分かるって、
名刺よりも自己紹介になるなあって思います。
 
企業だけでなく、個人でもきちんとしたサイトを希望される人は
世界観を知って貰う目的がとても多いと思います。
 
コーディングが苦手な人や、ここで作成を諦めてしまう人も多いですが、
私自身実は本格的にコーディング作業をするようになって2年も経っていません。
フルデザインの作成するにいたっては、1年程。

基礎知識はあったので、テーブル組、企画提案、ディレクター、カメラマンなどの
WEB関連の仕事を得て、最後に全て自分でやる事の楽しさを
感じたくて制作メインの仕事をするにいたりました。

やる気さえあれば、誰でも作れるのがWEBサイト制作の楽しさだと思います。
 
コーディング作業に本格的に入る前に、
デザインをしながら考えていたマークアップの作業になります。

一枚絵だったデザインを立体的に考えて、
どこがどんな仕組みとして動かすのか、画像処理をどうするのか…

今回のデザインは、
ヘッダー、メインコンテンツ、フッターの3つの要素で組みます。

ヘッダーはサイトの頭の部分。
今回は、ロゴ、背景、グローバルナビ、ページの
メインイメージの4つの部品でスライス。
メインの部分。
本日の写真、左の縦の紹介文、背景、見出しの部分、
サイトマップ部分のサブイメージでスライス。
フッター部分は、コピーライト、マフィンのイラスト、背景でスライス。

スライス作業もFireWorksで行います。
この作業でFireWorksの良さが発揮されます!

詳細はまた後日・・・

**********

現在本家サイトリニューアル中↓

デザイン | リニューアル中継(?)

JUGEMテーマ:写真


【WEBデザイン】

全部作成してからアップしようと以前から
作っていた本家サイトでしたが
なかなか時間が取れないので、まったりと
作っていては重い腰があがらん!

ということで、作成しながらアップしていくのが
楽しそうかも・・・と始めてしまいました。

トップページのイメージはできたので
静止画をまずはアップ。

左側に並んでいるカラーの正方形は
使用するカラーチャート素材です。
私はどちらかというと、ナチュラルな色合いというより
濃い目の派手目な方が好きなので
まさに、自分の好きなワインレッドと黄緑の組みあわせで作成しました。

右側に書いてあるのが
今アップしているファイルのディレクトリです。

通常サイトの作成をする際にこんな風に最初に
サイト構成をしながらファイルをフォルダに分けて作成します。
そうすると後から更新する際にとっても分かりやすいです。
こういうディレクトリは作成者によって変わってきます。
そんな細かな所も見ると楽しいです♪

とりあえず今回のサイトの決め事。

・UTF-8で作成
・HTML5は今回は対応しない
・JavaScriptを勉強も兼ねて積極的に作る
・携帯&スマートフォンも対応していく
・対応プラウザ
IE6〜/Firefox/Chrome/safari
Win、Mac共通
・基本フォントはヒラギノ・ゴシック
・あくまでも個人サイトなのでSEOにはこだわらないマークアップ

どんな風に出来上がるか・・・
悩んでいくか、諦めるか(汗)気長にレポートを楽しんで
頂けたら嬉しいです。

**********

たまにサイトを何のソフトで作っているか?
と聞かれる事があるのですが、私はサイトのデザインに関して、
ほぼFireWorksで作ります。 
写真加工はPhotoshop、イラストはイラレやペインターなどが多いです。
(DTPはPhotoshopとイラレ)
 
Web制作をしない方には、使う事がほとんど無いのでは?と思うソフトです。
 おかげで、使い方などの参考書の種類の少ない事…

さらには参考になるWebサイトも少なくて
まだ使いこなしてるーって思えてません(汗
 
でも、そんな私でさえもPhotoshopとイラレで作っていた頃と比べたら、
制作にかかる時間が全く違います。

特にスライスの多いにサイト制作をすると時間の短縮になりますし、
ボタン1つ作るのにバリエーションも豊富でしかも短時間で終わります。

愛すべきソフトのひとつです。

**********

現在本家サイトリニューアル中↓

<< | 2/2PAGES |

■micchi
静岡在住のwebデザイナー。
他にAtelier*Spoonにて写真教室など
しております。
コーギーのアフロと幸せな
毎日を送っております。
■好きな物
・お菓子作り
・写真撮影
・STUDIO M'の食器
・MATEUSの食器

selected entries

categories

archives

recent comment

link

search this site.

others