PAGES

GUIDE

DATA

THE 飛島ワールド

油絵画家飛島達也ポートフォリオサイト制作
Keywords:HTML, CSS, JavaScript

top01.jpg


プロジェクトの概要

内容

芸術学部芸術表現学科4年の飛島達也先輩が手がけた油絵作品のポートフォリオサイト制作



目的・主旨(研究背景)

近年、自身の作品がメディアに取り上げられ人気ができている本校芸術表現学科所属4年の飛島達也先輩。
しかし、ネット社会において作品をアプローチする大事な自分のポートフォリオサイトが無いということを仲介者の同学科立石オメガ泰造先輩から連絡を受け、制作する企画である。

※対象者は、システム(機会操作)に関する知識が無である為、操作マニュアルも制作する



完成までの流れ(研究方法)

①油絵画家のみならず芸術家・デザイナー等のポートフォリオサイト参考・比較し、レイアウト・デザイン性の良し悪しを把握する。

②デザイン・レイアウトを複数個制作し、飛島先輩に聞き込み。
 要望の取り込みも行う。
 ※有料サーバー・ドメインの有無も確認

③レイアウト・デザインが確定次第、HTML, CSS, JavaScriptで制作。

④自身の作品の画像を本学卒業作品展の委員または、飛島先輩自身から頂く

⑤動作確認・微調整をし、最終チェックを飛島先輩に確認する。
その後、運営・管理・編集方法のマニュアルを制作し、共同でサイト管理をする。

⑥オープンキャンパスにて制作物を公開

※本プロジェクトは、2年間契約で制作者(伊藤氏)と依頼者(飛島氏)がサイトの運営・管理・編集を共同で行う。
制作者は、フッダーに自身の名前を掲載することで無償で管理する。



他サイトの比較(調査・分析)

画家・デザイナー等のポートフォリオサイトをインターネットで検索し、メニューバー・レイアウトの統一性を比較
結果
・レスポンシブ対応されていないサイトがある
・無料サイトエディタを使用している
 →ドメインの重要性をあまり把握していないと推測される
・大体のメニューバーがtop(home)・profile.....の順になっている
・widthとheightが固定されているサイトもある
・バッグカラーに白を取り入れているサイトが多い
 →その個人の個性を感じにくい




コンセプト

「飛島達也ワールド全開」

・飛島達也先輩の個性が感じ、伝わるポートフォリオサイト制作を心がける。
・先輩の要望通りに制作することを第一の目標にする



サイトコンセプト

シンプルで分かりやすく、整列されたポートフォリオサイト
 →依頼者との共同管理をする上で編集しやすいようにする為でもある。



制作物

ポートフォリオサイト
操作マニュアル



ワイヤーフレーム

190913.png




プロジェクトの期間・スケジュール

スケジュール

プロジェクトで使用するツール

Adobe Photoshop
Adobe Illustrator
atom
FileZilla



ToDo

  • 先輩たちとの連絡網を決める
  • webデザインを決める(フレーム)%%
  • 先必要事項を取り入れる(項目決め等)
  • お問い合わせフォームを制作(wordpressスキン or googleフォーム)
  • 先英語サイト検証中



進捗・記録

2019.06.13

19091301.png
19091302.png
  • 教員に相談した結果、PROFILEはA案、NEWSはB案に決まりつつ、
  • ファビコンデザインは、影がないシンプルに変更決定。
  • 後日、飛島先輩に進捗状況を報告・確認する。

2019.06.06

19091303.png
  • コーディング作業開始
  • サイトデザインは、3案制作し、飛島先輩と教員と相談したのちに最終案決定。
  • 仮ファビコン(ロゴタイプ)制作完了。(最終案も各双方に相談し決定する)


2019.05.30

  • 中間報告 反省点
     ・コンセプトをはっきりと(あやふやを無くす)
     ・制作方法の練り直し

2019.05.29

  • 飛島先輩と今後の流れを相談&打ち合わせ
     ・有料サーバー・ドメインの取得を決定
      登録サイトは、Xサーバーとお名前ドットコム
     ・ベースカラー(バッググラウンドカラー)は、黒。フォントは、白
     ・ロゴタイプ(ファビコン)は、先輩の要望通り「飛島色」が
      入ったデザイン
      ※飛島色=黄・茶・黒(カラーコードは、後日報告)
     ・メニューは、TOP・PORTFOLIO・NEWS・PROFILE・CONTACT
      先輩の要望でおしゃれでカッコよく見える英語で統一
      CONTACTの設定は、先輩が今後使いやすいようにgoogleフォームを使用
     ・メニューは右沿いロゴは、左沿い
     ・現段階で無理にCMS形式(wordpress)にしなくても良い可能性が非常に高い
      理由=そこまで再編集が難解でなかった
     ・可能であれば作品の販売ページも制作か?(決定ではない)
     ・作品の写真は、教務課からではなく先輩から頂く方が早い

先輩と話し合った結果ワイヤーフレーム案決定
 

2019.05.23

  • 制作・調査方法の練り直し
     企画の進行や制作の進め方がふわふわ(決まりごとがない)しているため構想を固めた。
    授業終了後、飛島先輩に再度必要事項を確認。

2019.05.16

  • 有料サーバー・ドメインの取得を飛島先輩に説明完了、決定待ち
  • メニューバー項目案
     (HOME, PROFILE, GALERY, NEWS, CONTACT)
  • サイト形式をランディングページに決定
  • イラストレーターでサイトデザイン制作(途中)

2019.05.09

  • イラストレーターでサイトデザイン制作
  • 自メモの中から複数のデザインを1つに絞る

2019.04.25

  • メモのデザイン案の確定
  • 参考サイト(画家)のリンク貼り

2019.04.18

  • 他サイトのデザイン・工夫参考
     (サイトのメニューバー・作品の配置方法・アニメーション考察等の調べ) 

2019.04.17

  • 飛島先輩との正式な許可と連絡先交換完了
  • 仲介者として正式にオメガ先輩と連携
  • 作品の写真は、大学側が手配予定(卒展アルバム用を使用)

2019.04.11

  • オメガ先輩から飛島先輩のweb制作依頼

リンク

SNS

飛島達也-ツイッター
飛島達也-インスタグラム
飛島達也-facebook
飛島達也-学部情報

他サイト参考

NAOTA FUKASAWA
松井守男
miwa komatsu
吉野光
山本雄三
山下京子
大畑稔浩
河野桂一郎
清水新也
KOH
諏訪敦
小尾修

wordpressテーマ制作参考

WEBST8
WordPressCodex



添付ファイル: file19091303.png 1件 [詳細] file19091302.png 2件 [詳細] file19091301.png 2件 [詳細] file190913.png 1件 [詳細] fileワイヤーフレーム.jpg 20件 [詳細] filetop01.jpg 38件 [詳細]
Last-modified: 2019-06-13 (木) 20:11:39 (3d)