Portfolio をテンプレートにして作成

開始行:
*Portfolio 　 ポートフォリオとは、直訳すれば「紙ばさみ」のことですが、... デザイナー・クリエイターを募集する企業の採用担当者は、こ... -まずは、[[イメージ検索で様々なデザイン事例>GoogleImage:... //-先輩が残してくれたポートフォリオは、[[ArtSpace#50>http... ~ ***ポートフォリオの規格 -絶対こうでなければ・・という条件はありません。 -がっちり製本する人、クリアフォルダに整理する人、様々です... -大きさについてはA3サイズが一般的ですが、受け取った側の保... ただし、以下の点については、事前に確認が必要です。 --企業によっては提出サイズを指定しているところもあります... --A3サイズの仕上がりを得る（裁ち落としを前提とする）とい... -ページ数については、きちんと分類整理してあれば上限はあり... ~ ***ポートフォリオに掲載するもの（例） -序文（デザイン・アートについての考え方などをまとめた自己... -目次（掲載内容がわかりやすく整理されていること） -作品（一定のポリシーで整然と分類されている こと） &size(12){自主作品と課題作品とを分ける発想もありますが、... -習作（デッサンなど作品づくりの基礎力を見せるための資料と... -活動の記録（グループ展の際の記録写真など） -その他、連絡先情報など（奥付に相当） ~ ***ポートフォリオのページ構成について -授業課題、プロジェクト、公募、自主制作・・学生時代には様... 　紙のポートフォリオの場合は、イラスト / グラフィック / W... ~ ***各作品に付ける補足情報（例） -作品タイトル -これは何？（「◯◯展覧会のポスター（会場・日時は想定）」な... -作品サイズ（「A3」、「メディアサイズに応じて可変」など） -画材・支持体（「Adobe Photoshop CS2, インクジェット光沢... -制作年月日 -制作所要時間 -作品についての説明・コメント -補足情報（例えば、「第○回○○デザイン展入選」など） ~ ***ポートフォリオのレイアウト -ポートフォリオのレイアウトには''統一感''が必要です。した... --ページのマージン（余白） --作品タイトル、キャプション等の位置とスタイル（フォント... --キャプション情報の記載順（タイトル、サイズ、技法、年月... -下の図をクリックして拡大してご覧下さい。レイアウトグリッ... &lightbox(pf_sample.png,,30%); &color(red){これは、ひとつのレイアウトグリッドでも、２段... -いずれのページも、以下のグリッドを使ってレイアウトしてい... &ref(pf_base.pdf);　※このファイルはIllustratorで編集可能... -上のグリッドは、以下の条件で使用することを前提にしています --本文文字サイズ　8.5pt --行送り　15pt -イラスト、Webデザイン、映像など、見せ方が異なる作品では... ~ ***リーフレット さらに、一枚ものの自己紹介シートのようなものもあると便利... ~ ~ **Portfolioサイトについて ***Webポートフォリオ 紙のポートフォリオだけで勝負する時代ではありません。ブロ... 　他とかぶらない、確実に一意でヒットするキーワードを作り... -HTMLでつくる、あるいはWordPressのようなCMSを使います。 -以下のような構成が多いようです。 --TOP --ABOUT ME（自己紹介） --WORKS（作品紹介） --SKILLS（スキル紹介） --CONTACT（連絡先、フォーム） ~ ***静的サイトと動的サイト 静的サイトとは、HTML+CSS+JavaScript によってクライアント... みなさんがWeb上で見ているサイトの大半はCMS（動的サイト）... 実現したい仕様を見極めて、静的サイトか動的サイトが、ふさ... ~ -静的サイトに適したもの --ポートフォリオサイトのように、個性的な演出を行いたい場... --新作映画のキャンペーンサイトのように、制作後に情報を追... -動的サイトに適したもの --日々、新たな情報が追加され、それらがカテゴリーやタグに... --CMS特有の、固定ページ（ストック）と投稿（フロー）に情報... ~ ***シングルページで構成する場合 index.html を以下のようにセクションで区切って、縦一列で作... #image(WebDesign/Workflow/portfolio_single.png,right,20%) -HEADER（ロゴ・メインビジュアル） -NAVIGATION（メニュー） -ABOUT（自己紹介） -WORKS（作品） --ILLUSTRATION --PHOTOGRAPHY --GRAPHIC DESIGN --MOVIE --WEB -SKILS（使える技術、ソフトウエア、資格等） -CONTACT（連絡先情報等） #clear ~ ***シングルページ＋作品個別ページで構成する場合 index.html を以下のようにセクションで区切って縦一列で作る... #image(WebDesign/Workflow/portfolio_single_plus.png,right... -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(WebDesign/Workflow/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 ~ ~ ~

終了行:
*Portfolio 　 ポートフォリオとは、直訳すれば「紙ばさみ」のことですが、... デザイナー・クリエイターを募集する企業の採用担当者は、こ... -まずは、[[イメージ検索で様々なデザイン事例>GoogleImage:... //-先輩が残してくれたポートフォリオは、[[ArtSpace#50>http... ~ ***ポートフォリオの規格 -絶対こうでなければ・・という条件はありません。 -がっちり製本する人、クリアフォルダに整理する人、様々です... -大きさについてはA3サイズが一般的ですが、受け取った側の保... ただし、以下の点については、事前に確認が必要です。 --企業によっては提出サイズを指定しているところもあります... --A3サイズの仕上がりを得る（裁ち落としを前提とする）とい... -ページ数については、きちんと分類整理してあれば上限はあり... ~ ***ポートフォリオに掲載するもの（例） -序文（デザイン・アートについての考え方などをまとめた自己... -目次（掲載内容がわかりやすく整理されていること） -作品（一定のポリシーで整然と分類されている こと） &size(12){自主作品と課題作品とを分ける発想もありますが、... -習作（デッサンなど作品づくりの基礎力を見せるための資料と... -活動の記録（グループ展の際の記録写真など） -その他、連絡先情報など（奥付に相当） ~ ***ポートフォリオのページ構成について -授業課題、プロジェクト、公募、自主制作・・学生時代には様... 　紙のポートフォリオの場合は、イラスト / グラフィック / W... ~ ***各作品に付ける補足情報（例） -作品タイトル -これは何？（「◯◯展覧会のポスター（会場・日時は想定）」な... -作品サイズ（「A3」、「メディアサイズに応じて可変」など） -画材・支持体（「Adobe Photoshop CS2, インクジェット光沢... -制作年月日 -制作所要時間 -作品についての説明・コメント -補足情報（例えば、「第○回○○デザイン展入選」など） ~ ***ポートフォリオのレイアウト -ポートフォリオのレイアウトには''統一感''が必要です。した... --ページのマージン（余白） --作品タイトル、キャプション等の位置とスタイル（フォント... --キャプション情報の記載順（タイトル、サイズ、技法、年月... -下の図をクリックして拡大してご覧下さい。レイアウトグリッ... &lightbox(pf_sample.png,,30%); &color(red){これは、ひとつのレイアウトグリッドでも、２段... -いずれのページも、以下のグリッドを使ってレイアウトしてい... &ref(pf_base.pdf);　※このファイルはIllustratorで編集可能... -上のグリッドは、以下の条件で使用することを前提にしています --本文文字サイズ　8.5pt --行送り　15pt -イラスト、Webデザイン、映像など、見せ方が異なる作品では... ~ ***リーフレット さらに、一枚ものの自己紹介シートのようなものもあると便利... ~ ~ **Portfolioサイトについて ***Webポートフォリオ 紙のポートフォリオだけで勝負する時代ではありません。ブロ... 　他とかぶらない、確実に一意でヒットするキーワードを作り... -HTMLでつくる、あるいはWordPressのようなCMSを使います。 -以下のような構成が多いようです。 --TOP --ABOUT ME（自己紹介） --WORKS（作品紹介） --SKILLS（スキル紹介） --CONTACT（連絡先、フォーム） ~ ***静的サイトと動的サイト 静的サイトとは、HTML+CSS+JavaScript によってクライアント... みなさんがWeb上で見ているサイトの大半はCMS（動的サイト）... 実現したい仕様を見極めて、静的サイトか動的サイトが、ふさ... ~ -静的サイトに適したもの --ポートフォリオサイトのように、個性的な演出を行いたい場... --新作映画のキャンペーンサイトのように、制作後に情報を追... -動的サイトに適したもの --日々、新たな情報が追加され、それらがカテゴリーやタグに... --CMS特有の、固定ページ（ストック）と投稿（フロー）に情報... ~ ***シングルページで構成する場合 index.html を以下のようにセクションで区切って、縦一列で作... #image(WebDesign/Workflow/portfolio_single.png,right,20%) -HEADER（ロゴ・メインビジュアル） -NAVIGATION（メニュー） -ABOUT（自己紹介） -WORKS（作品） --ILLUSTRATION --PHOTOGRAPHY --GRAPHIC DESIGN --MOVIE --WEB -SKILS（使える技術、ソフトウエア、資格等） -CONTACT（連絡先情報等） #clear ~ ***シングルページ＋作品個別ページで構成する場合 index.html を以下のようにセクションで区切って縦一列で作る... #image(WebDesign/Workflow/portfolio_single_plus.png,right... -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(WebDesign/Workflow/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 ~ ~ ~

ページ名: