[企画・構成、デザイン、Flash、コーディング、CMS]

徳島 岩本FP事務所-様 ホームページ制作を担当させて頂きました。

緑を基調に、安心感を感じれるよう意識しました。

Skype相談を実施されており、Skype導入方法から実際のご相談までの流れをコンテンツ化し、相談者集が増加するように配慮しました。

WordPressをCMSとして設置。「お知らせ」、「岩本FPパーソナルブログ」、「よくあるご質問」、「関連リンク」に組み込みました。

ホームページ制作 大阪 MIRAiZ-ミライズ-

Photoshop 立体的なパッケージを作る　チュートリアル

チュートリアルって程でもないですが・・・読んでできそうなら活用して下さい。上記のような立体的なパッケージがPhotoshopで作れます。

こんな感じにガイドを作成します。背景などはお好みで入れてください。

表紙と背表紙になる部分を作ります。今回はMIRAiZのロゴを入れてみました。

Ctrl＋Tで変形します。ガイドをひいたところまで移動させます。この時にCtrlを押したままカーソルを持っていくと選択した角を変形することができます。背表紙も同じように変形させます。

これで立体的なパッケージができました。

映りこみ部分は、できたパッケージを複製して、移動。グラデーションマスクをかけています。

影の部分は、選択ツールでぼかしをいれて、しっくりくるところまで不透明度を下げている感じです。

あとは、ハイライト部分に円形グラデーションを入れてます。

お試し下さい。

ホームページ制作 大阪 MIRAiZ

CSS Spriteを使う。

CSSスプライトを使うことで、Webサイトの表示速度を早めることができます。

なぜ、Webサイトの表示速度が速くなるかと言うと、HTTPリクエスト数が減る事があげられると思います。

Webサイトを制作するにあたり、画像は頻繁に配置されます。Webサイトを表示させる時に、画像1、画像2・・・と読み込んでいってるわけですね。

画像を一つにすることで、画像１と読み込みが一回で済みます。だから表示が速くなるんですね。

例えば、

hタグに背景画像として使用したとします。

HTMLには、

<h3 id=”title1″>タイトル1</h3>

<h3 id=”title2″>タイトル2</h3>

<h3 id=”title3″>タイトル3</h3>

CSSには、

h3{background-image:(画像のURL)；｝

h3#title1{background-position: 0 0;}

h3#title2{background-position: 0 -60px;}

h3#title3{background-position: 0 -120px;}

始めに、h3自体に背景画像を読み込ませ、各idにて表示させる位置を変える。といった流れになります。

a:hoverなどの要素にも適応できるので、CSSでマウスオーバーを実装することができます。

気をつけないといけないのは、alt属性が必要な画像には、CSS Spriteを適用させるのは、やめましょう。ユーザビリティが下がります。

頻繁に更新しないといけない部分にも適用させるのはやめましょう。

透過PNGを使う場合は、IE６で正しく表示されませんので、ハックが必要になります。

ホームページ制作・Webサイト制作 MIRAiZ-ミライズ-

Photoshop くしゃくしゃな紙の質感を出すチュートリアルです。

Webサイトのデザインにも使えそうなので、Webサイト、映像、グラフィック　MIRAiZのロゴで制作してみました。

なかなかでしょ（笑）

くしゃくしゃの紙のテクスチャをつかって、レイヤーマスクを適用させ、ロゴのレイヤーをお好みのブレンドモードで。

今回は、丸い紙にしましたが、四角の紙でもいいですね。

お試しあれ。

参考URL　Create a crumbled paper effect in Photoshop+PSD

よく見ると、PSDファイルもダウンロードできるんですね（汗）

読めない英語を翻訳サイトを駆使して自分で制作してみたのに・・・（汗）

まぁ、自分で制作することに意義があるわけですよね。ポジティブにポジティブに・・・。

こんなポジティブなMIRAiZにWebサイト制作はお任せ下さい。
Webサイト制作、ホームページ制作 MIRAiZ-ミライズ-

Photoshopで艶のあるシンプルなナビゲーションメニューを作成する方法です。

簡単な方法なので、サクサクっとできちゃいますよ。

ドロップシャドウと、レイヤーの透明度のみですね。

背景にテクスチャやブラシを入れると、なんだかそれっぽくも見えます。

ブログ用に小さく作りましたけど（汗）

小さいナビゲーションもいいかもしれませんね（笑）

詳しくはコチラSimple Glossy Navigation Bar Design in Photoshop

Webサイト制作、ホームページ制作 MIRAiZ-ミライズ-

ホームページ制作、Webサイト制作を行う際、Webデザイナーの方は、何を使用しますか？？

Photoshop、Illustrator、Fireworks・・・などが多いのではないでしょうか？

MIRAiZでホームページ制作、Web制作を行う際は、Phhotoshop、Illustratorを使うことが多いです。

NGKは基本的にPhotoshopでホームページ、Webサイトのデザインを行っています。

そんな時に使えるPhotoshop素材がPhotoshop Browser Templatesです。

Firefox（Mac,Windows）、Internet Explorerの1280×1024、1024×768、800×600サイズの

ブラウザテンプレート。

デザインラフを作る時、既存サイトのキャプチャをはめ込んで遷移図を作ったりと活用できます。

他にも、Designers Toolbox: OS Form ElementsさんでFirefox（Mac,Windows）、Internet Explorer、Safariのテンプレートが公開されています。

こちらは、640×480～1600×1200まであります。

Photoshop Browser TemplatesもDesigners Toolbox: OS Form Elementsも両方、レイヤーグループに分かれていますので、扱いやすいです。

ブラウザテンプレートを使ってホームページデザインを行うと、仕上がりイメージに少しでも近づくので、

クライアントに提出する時は、イメージがつかみやすくなるかもですね。

使える素材はドンドン使って効率よくホームページ制作、Webサイト制作を行っていきたいと思います。

ホームページ制作、Webサイト制作 MIRAiZ -ミライズ-

早いものですね。今年も沢山のWebサイトを制作させて頂きました。

ありがとうございます。

2009年に経験させて頂いたことを、2010年のWeb制作に反映し、デザインもコーディングも更に向上させて行きたいと思います。

「Drawar」という、海外のWebデザイナーのコミュニティサイトがあるのですが、Designs of the Year: 2009と、優れたデザインを発表されています。

もぉ、刺激うけまくりです（笑）

気に入った物をご紹介させて頂きます。

Sid Lee

シンプルな構成なのですが、ナビゲーションも直感的。ドーンとしたタイポグラフィがインパクトあるデザインになってます。

Mission Bicycle Company

ベーシックなレイアウトですが、キレイなグリッドデザインでシンプルにデザインされています。

Tennessee Vacation Trails

すごい細かい作りこみです。サイト内に位置の要素が取り入れられていて、ナビゲーションに最初は戸惑いました（笑）

動かしていると作りこみの細かさに感動しました。

iA

このサイトも非常にシンプルなグリッドレイアウトになってます。日本語サイトもありますが、

なぜですかね･･･。英語はかっこいいですね･･･。

Area17

配色もシンプルで、タイポグラフィもインパクトのあるデザインになっています。

Webサイト、ホームページと呼ばれるものは、やはり情報を伝える為のものです。

伝える情報によってはクリエイティブなデザインも必要かと思いますが、伝えたい情報を際立たせるデザインが必要ですね。

もっと勉強します。

他にも色々紹介されていましたので、ご覧になりたい方は下記エントリーをどうぞ。

Designs of the Year: 2009

Web制作、ホームページ制作はMIRAiZ　-ミライズ-

ホームページ全体がクリスマスなイメージになっているサイト。

ヘッダー部分だけ等、一部にクリスマスなイメージを入れているサイト。

クリスマスも仕事で忙しいんだぁ～！！って方は、クリスマスなホームページを見て雰囲気を楽しんで下さい･･･。

USJです。もぉクリスマスムード満載ですね。

アンパンマン公式サイト。

ヘッダー部分がFlashでカレーパンマンが飛んでました。

横浜アンパンマンミュージアム。

アンパンマンらしいリースが可愛いですね。

ドラえもん公式サイト。

他はクリスマスは赤色！！って感じですが、ドラえもんカラーなクリスマスになっています。

ペプシコーラ。

メリー　ネックスマス！！って読むのでしょうか。

コカコーラ。

こちらもサイト全体がクリスマスな雰囲気になってますね。

Yahoo Japan。

ヘッダー部分にクリスマスイメージを盛り込んでます。

Yahoo USA

Yahooロゴ部分をトナカイさんが走り回ります！

Yahoo France

こちらは、Yahooロゴ部分をサンタさんが走り回ります。

Yahooのように一部分だけにクリスマスイメージを入れて雰囲気を伝える。手間が少なく効果的ですね。

USJやコカコーラのようにホームページ全体をクリスマスイメージにするのもインパクトがあって効果的ですね。

サイトの性質に合わせてデザインせねば･･･と感じました。

Web制作、ホームページ制作、各種デジタルコンテンツはMIRAiZ-ミライズ-