SHU BLOG

  1. Twitter
  2. Instagram
  3. contact

BLOG NEWS ブログ

  • ARTICLE
    2020.02.04
  • CATEGORY
TITLE

コーポレートサイト Webデザイン ポートフォリオ #01

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです！笑

シュウ
シュウ
今回は架空コーポレートサイトを作成しました！

コーポレートサイト オーダーシート

コーポレートサイト

● クライアント名
COMPANY SHU
● サイズ
ホームページ サイズ(1140px)
● ターゲット
20代〜30代の男女
● 依頼者の要望
メインカラーを青、新規会社なので未来を見ている、清潔感、お洒落なサイト
● 掲載内容
1:お知らせ 2:私たちについて 3:事業内容 4:実績紹介 5:代表メッセージ

コーポレートサイト メインカラー選定

コーポレートサイト メインカラー選定

シュウさんは今回は4番を選んだんだね！理由はあるの？

1クライアントの要望は青、未来でしたので空のイメージをもちました。

2空に１番近い色だと思いました、また文字を白にする際に明るい青より少し暗い青の方が目立つので4番を選びました。

コーポレートサイト メインカラー選定

確かに4番の方が目立つし白文字がはっきり分かるね！

コーポレートサイト 説明

2:私たちについて

私たちについて

私たちについてのメイン画像はお洒落な事務所の写真を選定しました。

メイン画像の下ということもあり、ここで働きたいと思う気持ちを強める為、また興味を持ってもらう為に選定しました。

3:事業内容について

事業内容について

ここでは違う色をしようしました。
私自身ホームページを制作する際には多くても3色に決めています。
今回は少し暗い青を選んでおりますので、逆に明るい色を選びメリハリをつけております。

4:実績紹介

実績紹介

実績紹介は今後とも増える可能性がありますのでWordpressで
制作しスライド式にして見ました。
※最初は実績が少ない場合は1boxスライド式に可能です。

5:代表メッセージ

代表メッセージ

代表メッセージのメインキャッチコピーは「Times Bold Italic」を使用し
目立たせております。

コーポレートサイト デザイン









まとめ

今回は、簡単にオーダーシートを作成し架空のコーポレートサイトを作成しました。
実際はクラアントと打ち合わせをしラフを作成しています。
私の場合はIllustratorでデザインしております。

写真の提供がない場合は
有料サイトから写真をダウンロードし加工なども行なっております。

やはり1番時間がかかったのは写真の選定ですね、
文字の配置を考えて選定しなければいけませんからね。

コーポレートサイト
  • 制作日数: Illustratorデザイン1日
  • 制作日数: PCサイトコーディング8時間
  • 制作日数: スマートフォンサイトコーディング6時間
  • ロゴ素材:　freepik
  • 写真素材: PIXTA ピクスタ

今後もいろんなサイトを作成します。

スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです！笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

最新記事

人気記事ランキング

オススメ記事

キーワード

  1. @keyframes
  2. aタグ
  3. background
  4. border
  5. box-shadow
  6. calc関数
  7. column
  8. content
  9. counter
  10. CSS
  11. CSS関数
  12. cursor
  13. decoration
  14. display
  15. dl
  16. first-letter
  17. first-line
  18. font
  19. Grid Layout
  20. HTML
  21. HTML5
  22. Illustrator
  23. jQuery
  24. letter-spacing
  25. line-height
  26. list-style
  27. margin
  28. mark
  29. object
  30. ol
  31. opacity
  32. overflow
  33. padding
  34. perspective
  35. Photoshop
  36. PHP
  37. position
  38. pタグ
  39. table
  40. text-align
  41. text-indent
  42. text-shadow
  43. transform
  44. transition
  45. ul
  46. vertical-align
  47. WEB
  48. white-space
  49. WordPress
  50. WP ULike
  51. writing-mode
  52. z-index
  53. アニメーション
  54. グラデーション
  55. ハイライト
  56. ブログ
  57. ユーザーアクション
  58. 擬似クラス
  59. 縦書き

カテゴリー

月別アーカイブ


スタンダードプラン　詳細はこちら

Portfolio

    © 2020 shu-naka-blog

  • HOME
  • CONTACT
  • PAGE TOP

    • page_top