Works

Corporate-site3

企業サイト

[クライアント名] 企業(従業員1000名/サービス企業)
[サイト種別] コーポレートサイト/サイトリニューアル/運用/直案件
[期間]6ヶ月(仕様設計1ヶ月/制作実装・検証2ヶ月・定期コンテンツ運用3か月)
[役割]サイトリニューアル。クライアントや広告代理店の要望ヒアリング、デザイナーへの指示等を中心に制作ディレクション、コンテンツ企画・運用を担当。
[アサインメンバー]プロデューサー1名/デザイナー1名/SE3名
[クライアントの要求] 使いやすいサイト構成・CV率アップ
[課題] 情報習得までの低いユーザビリティ・CV誘導の導線見直し
[提案方法] デザイン案の提案、UIの提案
セッション数増加、CV率アップ。

Corporate-site2

企業ポータルサイト

[クライアント名] 企業(従業員1000名/サービス企業)
[サイト種別] コーポレートサイト/サイトリニューアル/約100ページコンテンツ作成/直案件
[期間]1年6ヶ月(仕様設計1ヶ月/制作実装・検証2ヶ月・定期コンテンツ運用1年)
[役割]サイトリニューアル。クライアントや広告代理店の要望ヒアリング、デザイナーへの指示等を中心に制作ディレクション、コンテンツ企画・運用を担当。
[アサインメンバー]プロデューサー1名/デザイナー1名/SE2名
[クライアントの要求] 使いやすいサイト構成・女性ターゲットのデザイン・会員獲得率アップ
[課題] 情報習得までの低いユーザビリティ・会員誘導の導線見直し
[提案方法] デザイン案の提案、UIの提案
セッション数10%増加、会員獲得率アップ。

個人サイト

Tips ブログ

Webサイト制作 Tipsブログ

1971 青森県生まれ
1990 高校卒業
1990~1998 販売員→結婚→出産×2→離婚→上京
1998~現在 事務員→占い師→出産→Web制作
占いサイトを作りたいと思いWeb制作を始め、
さまざまな企業にて新規立ち上げ、更新、運用等にかかわってきました。書くことが好きで、占い雑誌への掲載や、ブログでの公式サポーターとして執筆も経験しています。Web制作では、デザイナー業務からディレクション業務、プロデュースまで従事していました。
私生活では3人の子供を持つシングルマザーとして奮闘しております。
二人は成人して、居酒屋の店長と中華料理店で調理をしています。

好きなデザイナー:Tord Boontje
好きな画家:アルフォンス・ミュシャ、ジョン・アルホーグ
キース・ヘリング、天野 喜孝

ブログテンプレート制作

template

ブログテンプレート制作
ブログテンプレート制作

[クライアント名] 企業(従業員10名/サービス企業)
[サイト種別] ファッションポータルサイト/CMSテンプレート・約20ページ/直案件
[制作期間] 6ヶ月(企画1ヶ月/仕様設計1ヶ月/制作実装2ヶ月/検証1ヶ月)
[役割]新規ポータルサイト立ち上げ、企画ページを約50ページ作成。クライアントや広告代理店の要望ヒアリング、デザイナーへの指示等を中心に制作ディレクション、更新業務を担当。
[アサインメンバー]プロデューサー1名/他外注/デザイナー4名/フロントエンドエンジニア2名/SE1名
[クライアントの要求] 新規ユーザー獲得
[課題] 認知力アップ
[提案方法] ファン獲得コンテンツの定期配信のためCMSを導入
CMS構築とコンテンツ企画更新運用により、ユーザー獲得。その後、フォーム最適化により、CV率10%→18%まで向上。

Corporate-site

企業サイト

[クライアント名] 企業(従業員10名/サービス企業)
[サイト種別] コーポレートサイト/1コンテンツリニューアル約20ページ/直案件
[制作期間] 3ヶ月(仕様設計1ヶ月/制作実装・検証2ヶ月)
[役割]サイト一部リニューアル。クライアントや広告代理店の要望ヒアリング、デザイナーへの指示等を中心に制作ディレクションを担当。
[アサインメンバー]プロデューサー1名/デザイナー1名/他外注/フロントエンドエンジニア2名/SE1名
[クライアントの要求] 使いやすいサイト構成・女性ターゲットのデザイン
[課題] 情報習得までの低いユーザビリティ
[提案方法] デザイン案の提案、UIの提案
セッション数10%増加、クライアント側での顧客獲得率アップ。

ECサイト

ECサイト

[クライアント名] 企業(従業員20名/サービス企業)
[サイト種別] ECサイト/直案件
[制作期間] 3ヶ月(企画1ヶ月/仕様設計1ヶ月/制作実装・検証1ヶ月)
[役割]サイトフルリニューアルと共に、商品別にランディングページを約50枚作成(DBからの自動出力有り)。クライアントの要望ヒアリング、デザイナーへの指示等を中心に制作ディレクション、更新業務を担当。
[アサインメンバー]プロデューサー1名/デザイナー4名/フロントエンドエンジニア1名/SE1名
[クライアントの要求] 売り上げアップ
[課題] 認知力アップ・リピーター数確保
[提案方法] 商品コンテンツの増加による、露出度アップ
ページ最適化により、買い上げ率119%まで向上。

Tips

これからWebデザインを学ぶ皆さんに知っておいていただきたい法則があります。
パレードの法則です。

パレートの法則(パレートのほうそく)とは、経済において、全体の数値の大部分は、全体を構成するうちの一部の要素が生み出しているという説。
80:20の法則、ばらつきの法則などと呼ばれることもあるが、本来は別のものである。
イタリアの経済学者ヴィルフレド・パレート(Vilfredo Federico Damaso Pareto)が発見した冪乗則である。経済以外にも自然現象や社会現象等様々な事例に当て嵌められることが多い。
ただし現代で言われるパレートの法則の多くは、法則と言うよりもいわゆる経験則のたぐいである。自然現象や社会現象は決して平均的ではなく、ばらつきや偏りが存在し、それを集約すると一部が全体に大きな影響を持っていることが多い、というごく当たり前の現象をパレートの法則の名を借りて補強している場合が少なくない。
また主要な一部(80:20の法則で言う20%の部分)だけが重要で、残りは重要ではないという説明がまれに見られるが、それも本来のパレートの論旨とは無関係である。 wikipediaより抜粋

 

若干本来の伝えたいこととずれている認識もありますが、100%である必要はないということをお伝えしたいのです。

Webのプロになりたい思った時に、
あらゆる分野のあらゆる知識を完璧にマスターしなければならないと
思っている人がいるかもしれません。

時間が無尽蔵にある人ならば、可能かもしれませんが、
多くの人がやることがたくさんあり、忙しいと思います。

限られた時間の中で、
効率よくスキルを身につけるのにはどうすれば良いのでしょうか?

その答えがパレードの法則です。

Webデザイナーになる過程においても、本当に重要なスキルを集中して身に着けることで残りのレベルの底上げができます。

HTMLなどには数百種類のタグがありますす。
そのタグをすべて覚える必要があるのでしょうか?

経験が豊富なプロのWebデザイナーであっても、普段使うタグは30個程度です。

つまり、全体の数パーセントを使いこなせば
80%以上の仕事ができてしまいます。
webデザイナーとして一人前になるのに
本当に重要な20%のスキルを習得するには、たくさんHPを作成することです。

覚えることを先にするのではなく、実際のHP作成をしながら覚えることが一番の近道です。

http://www.ikesai.com/

http://bookma.org/

http://io3000.com/

上記サイトの中から気に入ったサイトをFirebugなどで確認したり、

ホームページクローン作成

上記を使って必要なパーツを入手して、CSSの変更などをしてみる。

HTML5になっていないページをHTML5 に変更してみるというのも学習方法としておすすめです。

- 8 WEBデザイナーになるための必須事項

Webデザイナーと言うイメージとフロントエンジニアって聴くのと

皆さんどんなイメージでしょう?

今までマークアップエンジニアと言うエンジニアがjQueryの普及で

Javascriptができることを求められて

フロントエンジニアというエンジニアになってるのかな?と思いました。

一般的には主にWebブラウザとシステムの間を取り持つエンジニアとしてWeb系企業では一般的になった職種と言われています。

 

Webデザイナーは画像出来る=デザインカンプまで出来る=一からサイト作れる

フロントエンジニア=更新や修正業務デザインカンプをHTMLにマークアップ

っていう違いでしょうか?

HTML CSS Javascript

ここにUI(ユーザインタフェース/user interface)をしっかり意識してサイト作成出来ることが必要です。機能面の設計についての理解や知識が不可欠となってきます。

今はさらにスマホの需要に伴い、UX(ユーザーエクスペリエンス)も求められます。

イメージとしてフロントエンジニアとして経験をつみ、Adobeを学習してWebデザイナーとしてステップアップして行くのが近道かもしれません。

まずはサンプルを作ったサイト作成をアレンジしてポートフォリオサイト完成させ、レスポンシブルサイトに修正してみるのが目標設定しやすいでしょう。

参考本

 

 

- 4 フロントエンジニアとしてのスキルアップ

以前簡単なフローチャートで説明しましたが、一般的なWeb制作は

ヒヤリングと調査の部分はWebディレクターの役割で、サイト設計あたりから、Webデザイナーが修正、更新を行うというのが一般的だと思います。

たとえば、制作会社で、中小企業のWebサイトを制作してほしいという依頼があった場合

  1. 企業より会社へ問い合わせがある
  2. ディレクター(プロデューサー兼)が企業へ訪問し、希望Webサイトのヒアリングをする
  3. ディレクターがヒアリングをもとにサイトマップ、ワイヤーフレームを制作
  4. デザイナーがPhotoshopでデザインカンプを制作 ※ディレクターが作成する場合もあります。
  5. ディレクターがデザインカンプを画像形式で保存し、企業へ画像を確認してもらいます。
  6. 修正などがあれば、カンプを修正し、OKが出たらコーディングにはいります。
  7. コーダーが、デザインカンプをもとにHTML,CSSでマークアップ、コーディングする。※デザイナーがやる場合もあります。
  8. Javascriptなどのプログラムが入っている場合、コーディング後実装します。
  9. 作成したHPをテストし、不具合などを修正し、完成させます。
  10. 企業へ納品します。

会社によっては、3のワイヤーフレームからデザイナーがかかわる場合もあると思いますが、ディレクターがプロデューサーを兼ねていて、デザイナーがいる場合は上記のようになると思います。フロントエンドエンジニアが別にいる場合は、8の工程はフロントエンドエンジニアの担当になります。

他にも受注に際して、もう少し細かい事項がありますが、今回は省きます。

上記を今回は自分のポートフォリオサイトに置き換えて制作フローを導き出してみましょう。

サイトマップは下記のようになります。

Sitemap

 

コンタクトフォームをつけることで、企業サイトなどを作成する場合のプログラミング系知識なども理解してもらえますので、コンタクトフォームを使えるようにしています。

今回はページとして作成せず、jQueryのモーダルを使った方法でページ内に組み込む予定です。サイト構成としては、ページとして扱います。

Photoshopで 下記ワイヤーフレームからページカンプを制作し、切り出してマークアップする方法でポートフォリオサイトを作成してみましょう。

トップページのデザインは下記です。

Wireframe (1)

 

大きい画像を使い背景とします。下のコンテンツが並ぶ部分はレイヤーマスクのグラデーションを使って画像をグラデーション処理したものを使用します。

前回作成したlogo.psdを使用し、自分のサイトの名前にテキスト部分を変更して使用します。

グローバルナビ部分はいったん、シンプルな文字ベースで作成します。Illustratorを習得したら、同じようなイメージでアイコンを並べるページも作成可能となります。

このワイヤーフレームは、今後も使うので、wireflameと名前を付けて保存してください。

今回必要となる画像は、背景用の画像 自己紹介用の画像 作品として自分が作った画像2枚 となります。

次に自己紹介、作品紹介のページですが、TOPページとあまり構成は変えずに

Wireframe (2)

上記のように画像の上に四角いボックスを作り、そこに画像と説明を入れ込むようなページにします。

画像自体は、すでに用意してあるものを使うので、マークアップ、コーディングの変更だけで完成予定となります。

Photoshopの知識がある方は、持っている画像を使ってワイヤーフレームを作成していってください。

マークアップ、コーディングが終わったら

Markup Validation Service

ここにファイルをアップロードして確認します。

マークアップ、コーディングのミスのないサイト作りを目指しましょう。

- 6 一般的Web制作のワークフロー ポートフォリオサイト制作準備

Copyright © 2021 mn-design All Rights Reserved.