Advertisement

30businesswebtutorial

個人ウェブサイトと企業向けウェブサイトの違いはなんでしょう。

いろいろな企業ウェブサイトの共通する点のひとつは、すっきりとした見やすいシンプルなデザインではないでしょうか。

自社ホームページで分かりやすく、自社製品をユーザーに紹介するためには、効果的な方法かもしれません。

そんなプロ仕様のウェブサイトデザインを自分で作ってみませんか。

 

今回は、Photoshop(フォトショップ)を使ってウェブレイアウトをデザインするチュートリアルを30個まとめた「30+ Professional Business Website Design Tutorials in Photoshop」をご紹介します。

多くのチュートリアルでは、サンプル用PSDファイルが公開されているので、そのままデザインに応用することもできます。

 

 

詳細は以下から。

 

 

 

Photoshopで企業用ウェブレイアウトをデザインするチュートリアルまとめ

 

Apple社のホームページそっくりなウェブレイアウトを作る方法

タイトルそのままですが、淡い同系色のグラデーションを使うことがポイントになってきます。

すっきりとしたデザインですので、電化製品のみではなく、家具や文房具、洋服などいろいろなウェブサイトに応用できそうです。

31

サンプルPSDをダウンロード

 

 

立体的なメニューバーをデザインした企業ウェブサイトの作り方

企業用ウェブサイトでよく使われる青とオレンジを使ったデザインを紹介しています。

ポイントとしては、背景色を単色にせずに、同系色のグラデーションを使うことでエレガントな雰囲気に仕上げます。

カラーリングは参考になるのではないでしょうか。

32

サンプルPSDをダウンロード

 

 

グリッドを使ったApple社のiTunesのようなウェブレイアウトをつくる方法

すっきりとした3カラムのウェブレイアウトをデザインする方法を紹介しているチュートリアル。

ボタンをクリックする前、後などの微妙な色の変化などはとても参考になります。

こちらも青色を基調としたグラデーションを背景に使用しています。

16

サンプルPSDをダウンロード

 

 

写真を大きく使った企業用ウェブサイトの作り方

ヘッダー部分にサムネイル写真を大きく使用したウェブレイアウトの作り方を紹介しているチュートリアル。

黒ではなく濃紺を使用することで、ウェブサイトのイメージが重くなり過ぎないように考慮されているようです。

こちらももちろんグリッドを使った3カラムでデザインされています。

33

サンプルPSDをダウンロード

 

 

企業用ウェブサイトを10分ででつくる方法

これから企業用ウェブサイトをはじめてデザインする人にオススメの初級チュートリアル。

簡単なメニューバーの作り方、グラデーションを使った背景の作り方などを簡単に紹介しています。

もちろんサンプルPSDもダウンロードできます。

72

サンプルPSDをダウンロード

 

 

シンプルでモダンなウェブサイトをつくる方法

余白スペースをうまく使い、トップ部分にスライダーを使ったウェブレイアウトのデザイン方法。

光沢のあるメニューバーや半透明のタブバーの作りなどは知っておくと便利なテクニックのひとつではないでしょうか。

ポートフォリオサイトなんかに使用してもよさそうですね。

101

 

 

フォトリアリズムをデザインしたウェブレイアウトの作り方

散らかった机をイメージしたようなユニークなデザインが好印象のチュートリアル。

グリッドを使ったデザインのメリットとしては、ごちゃごちゃしたデザインをすっきりとまとめてくれることではないでしょうか。

161

 

 

高品質な企業向けウェブサイトの作り方

1pxの白ラインなど細かいところまでデザインされたチュートリアルです。

他のチュートリアルに比べて時間もかかりますが、覚えておきたいテクニックがたくさん掲載されています。

一度は見ておきたいチュートリアルのひとつではないでしょうか。

24

 

 

緑をアクセントカラーに使ったエレガントなウェブレイアウトの作り方

ヘッダー部分にスライダーをデザインすることで、より多くの商品の紹介をすることができるデザイン。

以前ご紹介した、「ウェブデザイン初心者向け、ウェブサイト作成時の3つの色の決め方」などのウェブサイトを使うことで、ウェブサイトにマッチした色を簡単に探し出すことができます。

27

サンプルPSDをダウンロード

 

 

カラフルなウェブレイアウトをデザインする方法

背景にカラフルなグラデーションを使うことで、他にあまりないユニークなレイアウトを完成させます。

グラデーションの色をお好みの色に変更するだけでも、まったくイメージの違うデザインに仕上がりそうです。

このデザインの場合、背景画像は半透明で透けるのでデザインが重要になってきますね。

28

 

まだアイデアに悩んでいる場合は実際使われているユニークなウェブサイトを参考にしてはいかがですか。

企業サイト作成のサンプルになるクリエイティブなサイト60個まとめ」にいろいろなウェブサイトをまとめて紹介しています。

また参照元サイトにもこのほかにもいろいろなウェブレイアウトデザインに関するチュートリアルが紹介されています。

よろしかったら、合わせてどうぞ。

 

[参照元 : 30+ Professional Business Website Design Tutorials in Photoshop – SmashShare]

 

RSS購読することにって、ホームページに新しい記事がないか探さずに、Photoshop VIPが毎日更新される記事をお届けする便利な機能です。

もちろん無料ですのでお気軽にどうぞ。

RSSをさらに詳しく知りたいひとはコチラの記事に説明しています。 

rss-feed-icon

 

Photoshop VIPでは、投稿記事をtwitterでも配信しています。お気軽に参加、お待ちしてます。

↓のアイコンをクリックすると、Photoshop VIPのTwitterページを見ることができます。

followme1