Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

業務で使えるWebデザイン設計

業務で使えるWebデザイン設計
by

Masakazu Matsushita

on 19 April 2010

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of 業務で使えるWebデザイン設計

アジェンダ 業務で使えるWebデザイン設計 2010/04/19
松下 雅和(@matsukaz) 1.Webデザインを取り入れる理由 2. 一般的なWebサイト制作の流れ 3. Webデザイン設計のポイント 4. Webデザイン制作 5. 質疑応答、意見交換 1.Webデザインを取り入れる理由 Webデザインがここ数年だいぶ話題に

興味のある人? でもWebデザインが話題になるのは
ほとんどが一般ユーザが対象の
外向けWebサイト 外向けWebサイトのデザインを
担当したことのある人? ほとんどいないと思います
なぜか? 社内システムとはそもそもシステムの目的が違う 外向けWebサイトも機能は大事
でも同じぐらいUXが超重要!
いかにユーザの心を掴むか!? 社内システムは機能が一番大事!
必要な機能を最適な形で提供する

UXはあまり求められていない
邪魔だと思われるケースすらある でも社内システムにだって
Webデザインを適用できるよね?
同じ機能なら使っていて
気持ち良いものの方がいいはず! でもそこには予算や納期といった壁が・・・

「ただでさえカツカツなスケジュールなのに、
デザインなんかに工数かけれないよ!」

分かります (゚ω゚;)(-ω-;)ウ、ウンウン・・・ あれ?でも機能を取るかデザインを取るかは二択? それなりにデザインを取り入れることは出来るんじゃないか?
もっと言えば、デザインを取り入れることで
設計時の生産性を高めたり、
機能をより最適な形で提供出来るんじゃないか? ノウハウさえあれば、
もっと積極的にデザインを取り入れられるはず! 闇雲にデザインを取り入れても混乱するだけ、
まずは先人(Webデザイナーさん)の知恵(世界)を
理解してみよう! 2. 一般的なWebサイト制作の流れ スタッフとその役割について 出典元:「ウェブの仕事力が上がる標準ガイドブック Webリテラシー」 制作ワークフロー 出典元:「ウェブの仕事力が上がる標準ガイドブック Webリテラシー」 全体的な流れはシステム開発とあまり変わらないよね? システム開発に適用できるタスクは
部分的にでも取り入れられるはず 3. Webデザイン設計のポイント システムの狙いとゴール設定 ■システムの狙い
何のために対象システムが必要なのか

システムの企画者/利用者それぞれの要求を
把握することが重要
どんな利用者がどんなシーンで利用する
システムなのか、ターゲットを想定する ■ゴール設定
どこまで開発するのか

納期や予算を考え、最終的なゴールに対して
どこまで開発を行うのか決定する
場合によってはフェーズ分けを行う
ここで重要なのは、最終ゴールを踏まえた上で
短期的なゴールを設定し、設計を行うこと サイト設計書 Webサイトを設計する際に基準となる指標をまとめたもの
プロジェクトに参加する全員が目を通しておくべき書類

以下のような資料が含まれる
・ディレクトリマップ
・サイトマップ
・遷移図
・プロジェクトのゴール
・ターゲット、閲覧想定環境
・ワイヤーフレーム
サンプル 制作仕様書 サイト設計書に基づいた制作のための書類
実装に必要な情報、技術、ルールが明確に記述される

以下のような情報が含まれる
・デザインガイドライン
・コーディングガイドライン
・テキスト表現、表記の規定
・使用技術の規定
・ディレクトリ、ファイルの命名規則 4. Webデザイン制作 レイアウトパターン 典型的なレイアウトを参考にする

・ウェブデザイン・マイスタイル
(Webレイアウト)
http://www.my-style.org/layout.html

一般的にはカラムレイアウトが利用される グリッドデザイン 統一したサイズの方眼(グリッド)を連結して
一つのユニットを形成し、並べていく方法
カラムレイアウトは、グリッドデザインの応用

960グリッドシステムなどを利用すると便利

・960 Grid System
http://960.gs/
HTMLの設計 ワイヤーフレームに基づいて
ページ内を大まかなフィールドに分ける
(HTMLのフィールド化)

IDやクラスの振りすぎには注意する サンプル CSSの設計 CSSは外部ファイルにコンポーネント化する

ブラウザスタイルの初期化から始める

・コリス(CSSの初期化サンプル)
http://coliss.com/articles/build-websites/operation/css/439.html

次に、各フィールドの配置やサイズ、
スタイルの設定を行う
モックの作成 ヘッダーやフッターなど、全てのページに
共通するフィールドをテンプレート化する
ページごとに異なるフィールドは、
編集可能領域として定義しておく

テンプレートを元に各ページを作成する
jQueryなどを利用する場合は、
この時点で利用可否を確認する モック作成デモ 参考サイト ・ウェブデザイン・マイスタイル(Webデザイン
http://www.my-style.org/layout.html

・960 Grid System
http://960.gs/

・コリス(CSSの初期化サンプル)
http://coliss.com/articles/build-websites/operation/css/439.html

・Dzine Blog(Webデザインのインスピレーション)
http://dzineblog.com/article/inspiration

・Color Scheme Designer 3(配色ツール)
http://colorschemedesigner.com/

・zen-coding
http://code.google.com/p/zen-coding/

・Love & Design(よりよいWebデザインにするための配色のセオリー)
http://sweetlovexx.seesaa.net/article/90107619.html#
Full transcript