WebDesign/Workflow をテンプレートにして作成

開始行:
*Workflow Webデザインのワークフロー //#image("workflow.png",right,20%) ~ Web制作の一般的な手順について概説しています。企画＞設計＞... 現状分析 ＞ アイデア ＞ ||: プロトタイピング ＞ テスト :... ~ ***CONTENTS #contents2_1 ~ **企画フェーズ ***ヒアリング -まず、クライアント（例えば商品メーカー）に十分な聞き取り... -聞き取りが終わり、情報の洗い出しが終わったらそれらを整理... ~ ***基本事項の確認 -''配信サーバーは？'' これは、最優先で確認すべき事項です。すでにサーバーを持っ... -ドメイン名は？ これも、これから・・であれば、早めに候補を選定する必要が... -いつまでに？ -予算は? ~ ***企画立案 -基本コンセプト：そもそもの目的は何か（PR / 組織の情報共... -ターゲットユーザー：どのような利用者を想定するか -''サイト名''：インターネット上でユニーク（唯一）であるこ... ~ ***サイトマップ -トップ（index.html）からはじまるメニュー構成をツリー状の... ＞ [[GoogleImage:Web サイトマップ]] -この作業には、十分時間をかけて下さい。「とりあえずできた... 　この設計段階をおろそかにして作り始めてしまうと、あとで... ~ ***ワイヤーフレーム サイトマップができたら、ページのワイヤーフレーム（レイア... -[[GoogleImage:Web ワイヤーフレーム]] -[[GoogleImage:HTML5 semantic]] -[[GoogleImage:HTML5 コンテンツモデル]] -[[レスポンシブデザイン>ResponsiveDesign]]（スマホ用 / タ... ページの区画整理は、HTML上のセクションタグ、ID、CLASS要素... -サイトに必ず必要になるのが以下の区画です。 --header 　サイトのロゴ などが配置される、画面の上部領域。 --nav 　メニュー項目をリストで並べる区画　 　navタグの中に ul / li タグを使って箇条書きします。 --main　主たる情報（本文）を掲載する区画 mainタグ 　section / article / aside といったタグで、情報内容を整... --footer 　サイトの管理者情報などが配置される、画面の下部... -その他、ページの区画整理に以下のような名称がよく用いられ... #container / #wrapper / #box ~ ***画面遷移図の作成 ECサイトなど画面遷移ルールが必要な場合に、これをグラフ化... -[[画面遷移図>GoogleImage:Web 画面遷移図]] ~ ***参考：Figma / Draw.io ''Figma'' や ''Draw.io'' はサイトマップやワイヤーフレーム... -https://www.figma.com/ -https://www.draw.io/ //-学生プロジェクトで Draw.io を利用した例　[[情報科学研... //-[[Google:Draw.io 使い方]] -学生プロジェクトでサイトマップ・ワイヤーフレームを記載し... https://design.kyusan-u.ac.jp/PDF/SiteMap_WireFrame.pdf ~ ***プロトタイプ作成 中途で無駄な修正作業を発生させないためにも、サイトのイン... -[[Google:Web制作 プロトタイプ]] ~ ***制作スケジュールと見積もりの作成 納期までの制作スケジュールをクライアントに示すことが必要... [[Google:Webデザイン 見積もり]] ~ ***プレゼンテーション 企画内容をクライアントにプレゼンテーションして、合意を得... ~ ~ **設計フェーズ ***ディレクトリマップの作成 index.html をツリーのトップに置いて、その他のファイルをど... テンプレートについては、以下の形を推奨します。 #image(directory.png,right,50%) - index.html - css フォルダ -- style.css -- xxxx.css・・ 追加のCSS等 - js フォルダ -- script.js -- jquery.xxxx.min.js ・・ jQuery 本体 -- xxxx.min.js ・・ jQuery プラグイン等 - images フォルダ -- logo.png -- xxxx.jpg 　： ~ ***ファイル命名規則 将来的にページが増えることを前提に、サイトマップに従って... ~ ***テンプレート制作 一般に、Webサイトをデザインする際は、閲覧者を混乱させない... -基本HTMLのコーディング（文書構造） -基本CSSのコーディング（ビジュアル） -プラグイン等の組み込み ~ ***基本HTMLのコーディング（文書構造） --ワイヤーフレームにしたがって HTML の枠組みをコーディン... --jQuery、プラグイン等、Webフォント等、サイトで共通に組み... --ナビゲーションメニューは、テンプレートの段階で書き込ん... --コンテンツ部分には、ダミー画像やダミーテキスト等を入れ... --この時点で、HTMLの構造に破綻がないことを確認して下さい。 ~ ***基本CSSのコーディング（ビジュアル） -ワイヤーフレームに照らして、CSSのコーディングを行います。 -CSSは、一般に構造がシンプルなモバイル用のコードを先に、... ~ ***表示確認（デバイス・ブラウザごとの対応） -ブレイクポイントの設定 Webサイトは、様々なデバイスに応じてレイアウトを変更できる... [[Google:レスポンシブ ブレイクポイント]] -スマートフォンでのチェック -タブレットでのチェック -PCでのチェック -印刷用CSSのチェック これを忘れがちです。Webサイトは必要に応じて印刷することが... ~ ***付記：ブラウザチェックについて Webの閲覧環境は、OSとブラウザの組み合わせで様々な状況が考... Chrome、Firefox、Safari は「Web標準」に準拠していることと... やっかいな存在だった IE についてですが、「2016年1月12日（... なお、実機を使わなくても、以下のようなサイトを活用すると... -https://netrenderer.com/index.php -[[Google:ブラウザ チェック]] ~ ***付記：印刷用CSSのチェックについて ブラウザには印刷用CSSを確認する機能があります。 -Chromeの場合：ディベロッパーツール＞メニュー＞Setings に... #image(media_print.jpg,,40%); ~ ~ **制作フェーズ テンプレートを複製して、HTMLで個別ページの記事を記載する... ~ ***事前準備 -文章原稿の整理 -画像データの整理・最適化 ~ ***個別ページのコーディング -文章、画像をテンプレートに従って掲載します。 -IDや CLASS の定義で CSSが適用される前提です。 ~ ***個別ページの表示確認 -バリデーション（ソースコードのチェック）を行うとともに、... ~ ~ **プロジェクトワークについて 複数のメンバーで規模の大きなWebサイトの開発にあたる場合は... ~ ***基本的な事項 -HTML + CSS　での設計を前提とする。 -分業制を前提とした設計、ルール作りを行う。 -全員が以下の事項の基本を理解していること 　　SEO　HTML　CSS ~ ***構成スタッフ（例） -ディレクター（マネージメント）→ 企画提案・スケジュール管理 -マークアップエディター（制作）→ 文書の作成（HTMLのコーデ... -スタイルデザイナー（制作）→ ビジュアルデザイン（CSSのコ... ~ ***共同作業のためのリポジトリ -[[GitHub]] 等のリモートリポジトリとバージョン管理を活用... ~ &aname(portfolio); ~ ~ **付記：Portfolioサイトについて ***静的サイトと動的サイト 静的サイトとは、HTML+CSS+JavaScript によってクライアント... みなさんがWeb上で見ているサイトの大半はCMS（動的サイト）... 実現したい仕様を見極めて、静的サイトか動的サイトが、ふさ... ~ -静的サイトに適したもの --ポートフォリオサイトのように、個性的な演出を行いたい場... --新作映画のキャンペーンサイトのように、制作後に情報を追... -動的サイトに適したもの --日々、新たな情報が追加され、それらがカテゴリーやタグに... --CMS特有の、固定ページ（ストック）と投稿（フロー）に情報... ~ ***シングルページで構成する場合 index.html を以下のようにセクションで区切って、縦一列で作... #image(portfolio_single.png,right,20%) -HEADER（ロゴ・メインビジュアル） -NAVIGATION（メニュー） -ABOUT（自己紹介） -WORKS（作品） --ILLUSTRATION --PHOTOGRAPHY --GRAPHIC DESIGN --MOVIE --WEB -SKILS（使える技術、ソフトウエア、資格等） -CONTACT（連絡先情報等） #clear ~ ***シングルページ＋作品個別ページで構成する場合 index.html を以下のようにセクションで区切って縦一列で作る... #image(portfolio_single_plus.png,right,30%) -index.html　 --HEADER（ロゴ・メインビジュアル） --NAVIGATION（メニュー） --ABOUT（自己紹介） --WORKS（作品一覧：サムネイルのクリックで個別ページへジャ... --SKILS（使える技術、ソフトウエア、資格等） --CONTACT（連絡先情報等） -work_00.html（これを作品の数だけ複製） --HEADER（ロゴ：クリックで index.html へ） --作品タイトル --作品画像 --キャプション --フッターナビゲーション（ prev <> next ） ~ ***マルチページで構成する場合 一般に以下のように複数の htmlファイルをつくります。 基本的には、すべてのページが同一のレイアウト構造になりま... #image(CSS/html_css_2.png,right,30%) -HOME ＞ index.html -ABOUT ＞ about.html -WORKS＞ works.html --GRAPHIC DESIGN＞ works_graphic.html --MOVIE＞ works_movie.html --WEB（Web一覧）＞ works_web.html -SKILS＞ skils.html -CONTACT＞ contact.html ~ ''付記'' #image(InformationDesign/記事の分類方法.png,right,30%) 授業課題、プロジェクト、公募、自主制作・・様々ある作品を... ~ ***マルチページでWordPress風に構成する場合 トップページあるいは、ギャラリーページに作品の一覧サムネ... #image(portfolio_multi.png,right,30%) -HOME ＞ index.html（標準テンプレート） -ABOUT ＞ about.html（標準テンプレート） -''WORKS'' ＞ works.html（標準テンプレート） --work01 ＞ work_01.html（作品テンプレート） --work02 ＞ work_02.html（作品テンプレート） 　　　　　　： --workXX ＞ work_xx.html（作品テンプレート） -SKILS ＞ skils.html（標準テンプレート） -CONTACT ＞ contact.html（標準テンプレート） ~ ~ **サンプル ***シングルページ・レスポンシブ シングルページで構成する前提の雛形です。 -DEMO：https://koichi-inoue.github.io/SinglePageResponsive/ -CODE：https://github.com/koichi-inoue/SinglePageResponsive ~ ***マルチページ・レスポンシブ 複数のページで構成する前提の雛形です。 -DEMO：https://koichi-inoue.github.io/responsive01_JS/ -CODE：https://github.com/koichi-inoue/responsive01_JS ~ ~ ~

終了行:
*Workflow Webデザインのワークフロー //#image("workflow.png",right,20%) ~ Web制作の一般的な手順について概説しています。企画＞設計＞... 現状分析 ＞ アイデア ＞ ||: プロトタイピング ＞ テスト :... ~ ***CONTENTS #contents2_1 ~ **企画フェーズ ***ヒアリング -まず、クライアント（例えば商品メーカー）に十分な聞き取り... -聞き取りが終わり、情報の洗い出しが終わったらそれらを整理... ~ ***基本事項の確認 -''配信サーバーは？'' これは、最優先で確認すべき事項です。すでにサーバーを持っ... -ドメイン名は？ これも、これから・・であれば、早めに候補を選定する必要が... -いつまでに？ -予算は? ~ ***企画立案 -基本コンセプト：そもそもの目的は何か（PR / 組織の情報共... -ターゲットユーザー：どのような利用者を想定するか -''サイト名''：インターネット上でユニーク（唯一）であるこ... ~ ***サイトマップ -トップ（index.html）からはじまるメニュー構成をツリー状の... ＞ [[GoogleImage:Web サイトマップ]] -この作業には、十分時間をかけて下さい。「とりあえずできた... 　この設計段階をおろそかにして作り始めてしまうと、あとで... ~ ***ワイヤーフレーム サイトマップができたら、ページのワイヤーフレーム（レイア... -[[GoogleImage:Web ワイヤーフレーム]] -[[GoogleImage:HTML5 semantic]] -[[GoogleImage:HTML5 コンテンツモデル]] -[[レスポンシブデザイン>ResponsiveDesign]]（スマホ用 / タ... ページの区画整理は、HTML上のセクションタグ、ID、CLASS要素... -サイトに必ず必要になるのが以下の区画です。 --header 　サイトのロゴ などが配置される、画面の上部領域。 --nav 　メニュー項目をリストで並べる区画　 　navタグの中に ul / li タグを使って箇条書きします。 --main　主たる情報（本文）を掲載する区画 mainタグ 　section / article / aside といったタグで、情報内容を整... --footer 　サイトの管理者情報などが配置される、画面の下部... -その他、ページの区画整理に以下のような名称がよく用いられ... #container / #wrapper / #box ~ ***画面遷移図の作成 ECサイトなど画面遷移ルールが必要な場合に、これをグラフ化... -[[画面遷移図>GoogleImage:Web 画面遷移図]] ~ ***参考：Figma / Draw.io ''Figma'' や ''Draw.io'' はサイトマップやワイヤーフレーム... -https://www.figma.com/ -https://www.draw.io/ //-学生プロジェクトで Draw.io を利用した例　[[情報科学研... //-[[Google:Draw.io 使い方]] -学生プロジェクトでサイトマップ・ワイヤーフレームを記載し... https://design.kyusan-u.ac.jp/PDF/SiteMap_WireFrame.pdf ~ ***プロトタイプ作成 中途で無駄な修正作業を発生させないためにも、サイトのイン... -[[Google:Web制作 プロトタイプ]] ~ ***制作スケジュールと見積もりの作成 納期までの制作スケジュールをクライアントに示すことが必要... [[Google:Webデザイン 見積もり]] ~ ***プレゼンテーション 企画内容をクライアントにプレゼンテーションして、合意を得... ~ ~ **設計フェーズ ***ディレクトリマップの作成 index.html をツリーのトップに置いて、その他のファイルをど... テンプレートについては、以下の形を推奨します。 #image(directory.png,right,50%) - index.html - css フォルダ -- style.css -- xxxx.css・・ 追加のCSS等 - js フォルダ -- script.js -- jquery.xxxx.min.js ・・ jQuery 本体 -- xxxx.min.js ・・ jQuery プラグイン等 - images フォルダ -- logo.png -- xxxx.jpg 　： ~ ***ファイル命名規則 将来的にページが増えることを前提に、サイトマップに従って... ~ ***テンプレート制作 一般に、Webサイトをデザインする際は、閲覧者を混乱させない... -基本HTMLのコーディング（文書構造） -基本CSSのコーディング（ビジュアル） -プラグイン等の組み込み ~ ***基本HTMLのコーディング（文書構造） --ワイヤーフレームにしたがって HTML の枠組みをコーディン... --jQuery、プラグイン等、Webフォント等、サイトで共通に組み... --ナビゲーションメニューは、テンプレートの段階で書き込ん... --コンテンツ部分には、ダミー画像やダミーテキスト等を入れ... --この時点で、HTMLの構造に破綻がないことを確認して下さい。 ~ ***基本CSSのコーディング（ビジュアル） -ワイヤーフレームに照らして、CSSのコーディングを行います。 -CSSは、一般に構造がシンプルなモバイル用のコードを先に、... ~ ***表示確認（デバイス・ブラウザごとの対応） -ブレイクポイントの設定 Webサイトは、様々なデバイスに応じてレイアウトを変更できる... [[Google:レスポンシブ ブレイクポイント]] -スマートフォンでのチェック -タブレットでのチェック -PCでのチェック -印刷用CSSのチェック これを忘れがちです。Webサイトは必要に応じて印刷することが... ~ ***付記：ブラウザチェックについて Webの閲覧環境は、OSとブラウザの組み合わせで様々な状況が考... Chrome、Firefox、Safari は「Web標準」に準拠していることと... やっかいな存在だった IE についてですが、「2016年1月12日（... なお、実機を使わなくても、以下のようなサイトを活用すると... -https://netrenderer.com/index.php -[[Google:ブラウザ チェック]] ~ ***付記：印刷用CSSのチェックについて ブラウザには印刷用CSSを確認する機能があります。 -Chromeの場合：ディベロッパーツール＞メニュー＞Setings に... #image(media_print.jpg,,40%); ~ ~ **制作フェーズ テンプレートを複製して、HTMLで個別ページの記事を記載する... ~ ***事前準備 -文章原稿の整理 -画像データの整理・最適化 ~ ***個別ページのコーディング -文章、画像をテンプレートに従って掲載します。 -IDや CLASS の定義で CSSが適用される前提です。 ~ ***個別ページの表示確認 -バリデーション（ソースコードのチェック）を行うとともに、... ~ ~ **プロジェクトワークについて 複数のメンバーで規模の大きなWebサイトの開発にあたる場合は... ~ ***基本的な事項 -HTML + CSS　での設計を前提とする。 -分業制を前提とした設計、ルール作りを行う。 -全員が以下の事項の基本を理解していること 　　SEO　HTML　CSS ~ ***構成スタッフ（例） -ディレクター（マネージメント）→ 企画提案・スケジュール管理 -マークアップエディター（制作）→ 文書の作成（HTMLのコーデ... -スタイルデザイナー（制作）→ ビジュアルデザイン（CSSのコ... ~ ***共同作業のためのリポジトリ -[[GitHub]] 等のリモートリポジトリとバージョン管理を活用... ~ &aname(portfolio); ~ ~ **付記：Portfolioサイトについて ***静的サイトと動的サイト 静的サイトとは、HTML+CSS+JavaScript によってクライアント... みなさんがWeb上で見ているサイトの大半はCMS（動的サイト）... 実現したい仕様を見極めて、静的サイトか動的サイトが、ふさ... ~ -静的サイトに適したもの --ポートフォリオサイトのように、個性的な演出を行いたい場... --新作映画のキャンペーンサイトのように、制作後に情報を追... -動的サイトに適したもの --日々、新たな情報が追加され、それらがカテゴリーやタグに... --CMS特有の、固定ページ（ストック）と投稿（フロー）に情報... ~ ***シングルページで構成する場合 index.html を以下のようにセクションで区切って、縦一列で作... #image(portfolio_single.png,right,20%) -HEADER（ロゴ・メインビジュアル） -NAVIGATION（メニュー） -ABOUT（自己紹介） -WORKS（作品） --ILLUSTRATION --PHOTOGRAPHY --GRAPHIC DESIGN --MOVIE --WEB -SKILS（使える技術、ソフトウエア、資格等） -CONTACT（連絡先情報等） #clear ~ ***シングルページ＋作品個別ページで構成する場合 index.html を以下のようにセクションで区切って縦一列で作る... #image(portfolio_single_plus.png,right,30%) -index.html　 --HEADER（ロゴ・メインビジュアル） --NAVIGATION（メニュー） --ABOUT（自己紹介） --WORKS（作品一覧：サムネイルのクリックで個別ページへジャ... --SKILS（使える技術、ソフトウエア、資格等） --CONTACT（連絡先情報等） -work_00.html（これを作品の数だけ複製） --HEADER（ロゴ：クリックで index.html へ） --作品タイトル --作品画像 --キャプション --フッターナビゲーション（ prev <> next ） ~ ***マルチページで構成する場合 一般に以下のように複数の htmlファイルをつくります。 基本的には、すべてのページが同一のレイアウト構造になりま... #image(CSS/html_css_2.png,right,30%) -HOME ＞ index.html -ABOUT ＞ about.html -WORKS＞ works.html --GRAPHIC DESIGN＞ works_graphic.html --MOVIE＞ works_movie.html --WEB（Web一覧）＞ works_web.html -SKILS＞ skils.html -CONTACT＞ contact.html ~ ''付記'' #image(InformationDesign/記事の分類方法.png,right,30%) 授業課題、プロジェクト、公募、自主制作・・様々ある作品を... ~ ***マルチページでWordPress風に構成する場合 トップページあるいは、ギャラリーページに作品の一覧サムネ... #image(portfolio_multi.png,right,30%) -HOME ＞ index.html（標準テンプレート） -ABOUT ＞ about.html（標準テンプレート） -''WORKS'' ＞ works.html（標準テンプレート） --work01 ＞ work_01.html（作品テンプレート） --work02 ＞ work_02.html（作品テンプレート） 　　　　　　： --workXX ＞ work_xx.html（作品テンプレート） -SKILS ＞ skils.html（標準テンプレート） -CONTACT ＞ contact.html（標準テンプレート） ~ ~ **サンプル ***シングルページ・レスポンシブ シングルページで構成する前提の雛形です。 -DEMO：https://koichi-inoue.github.io/SinglePageResponsive/ -CODE：https://github.com/koichi-inoue/SinglePageResponsive ~ ***マルチページ・レスポンシブ 複数のページで構成する前提の雛形です。 -DEMO：https://koichi-inoue.github.io/responsive01_JS/ -CODE：https://github.com/koichi-inoue/responsive01_JS ~ ~ ~

ページ名: