江川珠貴/情報デザイン研究II

芸術学部専用サイト - 九芸パレット -

芸術学部生に寄り添ったサイトの考案・制作

• Tamaki Egawa
• Keywords：information, website, communication
• 九芸パレットのプロトタイプ

概要

これは何？

芸術学部生に寄り添ったサイト

背景と目的

• 背景
  • K’sLifeが使いにくい
  • 大学が情報伝達ツールとしてK’sLifeに依存している
  • 他学科が何をしているかわからない
  • 芸学の情報が拾いづらい
  • 情報の発信源がまとまっていない

• 目的
  芸術学部の情報が纏まっており、学生同士で情報が共有できる場所をつくる
  
  

コンセプト

• 情報が拾いやすい
• 整理されていて利用しやすい
• スッキリと見せるためにシンプルに
• 丸みを帯びた形や明るい色を活用して、だれもが親しみやすくなるようポップな雰囲気に
  
  

成果物の仕様

• サイトマップ
  

• スマホ版ワイヤーフレーム

• PC版ワイヤーフレーム

• プロトタイプ
  
  

メンバー

• 江川珠貴　サイトマップ、メインビジュアル、プロトタイプ
• 田代爽乃　PC版ワイヤーフレーム、プロトタイプ
• 西山実伶　情報管理、プロトタイプ
• 濱有希子　ワイヤーフレーム、プロトタイプアニメーション
• 渡辺侑貴　スマホ版ワイヤーフレーム、プロトタイプ
  
  

制作ツール

• ハードウエア
  • MacbookAir
  • iPad
• ソフトウエア
  • ibisPaint
  • PowerPoint
  • Adobe Illustrator 2023
  • Adobe XD
  • figma
    
    

プロジェクトの期間

2023.09.20 - 2023.12.20　（プロトタイプ完成まで）

まとめ

結論として、サイトという形式ではないが、目標である動くプロトタイプを完成させることができた。
最近では、スマホで手軽に情報を得る人が多いことから、スマホ規格で制作を進めることが主流になりつつあることを知った。そのため、私たちもワイヤーフレームやプロトタイプはスマホ規格で作成し、スマホでの利用を意識した制作を進めている。今後の制作でも利用する人のことを考え、このサイトのニーズである学生間の交流がやり易い環境開発を目指す。
また、本制作はwordpressで行うため子テーマの作成やPHPの理解など、勉強も同時に行っていこうと思う。

調査

現状調査

• K's lifeが使いづらい
• Teamsの利用率が低い
• 芸学の情報が埋もれてしまう
  
  

先行事例

• ソーシャルデザイン学科
• 九州産業大学 芸術学部
  
  

参考サイト

色味 → 株式会社ABI新卒採用サイト
構成 → 公立大学法人 長岡造形大学
UI → マカロニえんぴつ Official Website

技法・技術情報

• Figma使い方
• Figmaアニメーション
  
  
  
  

プロジェクト管理

スケジュール

Googleスプレッドシート

ToDo

• ターゲット層の決定
• スケジュール決定
• サーバー決定
• 開発エンジンの決定
• 目的の明確化
• コンセプト決定
• サイトデザイン
• プロトタイプ作成

2023.12.20

サイトのビジュアルを再考（前回の続き）

• Pinterest
  
  

2023.12.13

サイトのビジュアルを再考

• 丸みを帯びたデザイン（ポップ）
• 項目ごとに色を使い分ける
• パレットをイメージした色合い
  
  

2023.12.06

最終発表

• ツリー型のサイトマップを作成
• K's Lifeのリンクを貼る
• 空き教室情報などは元々ある情報を活用する（リンクで飛ばすなど）
• サイトを引き継いだ時のための仕様書を作成
• 頻繁に見るものはTOPに置いておく（学科情報など）
• チームでやった意味としてきちんと役割分担する（発表時も役割毎に発表）
• サイトのカラーの工夫（学科の情報の時の色や全体への情報の色など）
• 更新する時はどのようにしていくのか話し合う
• サイトのビジュアルをブラッシュアップ
  
  

2023.11.29

プロジェクトミーティング

• プロジェクトメモサイト
• 発表練習
  
  

メインビジュアル作成

Googleドライブ

2023.11.22

プロジェクトミーティング

• プロジェクトメモサイト
  
  
  
  

2023.11.15

サイトマップ改正

• サイトマップ1120
  
  

プロジェクトミーティング

• プロジェクトメモサイト
  
  
  
  

2023.11.08

プロジェクトミーティング

• プロジェクトメモサイト
• push型とpull型とは
• シン・アカウント登録（個人）
• シン・クラウド for Free 登録（個人）
• Wordpress登録
  
  
  
  

2023.11.01

スマホ版ワイヤーフレーム考案

• ワイヤーフレーム案
  
  

プロジェクトミーティング

• プロジェクトメモサイト
• push型とpull型とは
  
  
  
  

2023.10.25

サイトマップ改正

• サイトマップ1025
• サイトマップ1026
• サイトマップ1030
  
  

プロジェクトミーティング

プロジェクトメモサイト

2023.10.18

サイトマップ作成

サイトマップ

プロジェクトミーティング

プロジェクトメモサイト

役割分担

• サイトマップ　江川珠貴
• ワイヤーフレーム　田代爽乃
• ロゴデザイン　西山実伶　濱有希子　渡辺侑貴
  
  
  
  

2023.10.11

ロゴ案ラフ

Googleドライブ

プロジェクトミーティング

プロジェクトメモサイト

2023.10.04

メモ

• 土台（一旦の形）を完成させる
• スケジュール決める
  
  

プロジェクトミーティング

プロジェクトメモサイト

2023.09.27

メモ

• 生徒
  • K'slife利用頻度
    (用途、利用しない理由)
  • Teamsの利用頻度
    (用途、利用しない理由)
  • どこで芸術学部関連のイベントなどの情報を得ているか
  • 他学科の情報を知りたいか
  • 芸学サイトにあってほしい項目、理由
  • その他要望
  • 興味ある人

• 教師
  • Teamsの利用頻度
    (用途、利用しない理由)
  • HTML/CSS、Word Press、PukiWiki
  • 芸学サイトにあってほしい項目、理由
  • その他要望
  • 連絡先を掲載していいかの確認
    
    

プロジェクトミーティング

プロジェクトメモサイト

2023.09.20

メモ

• PukiWiki、HTML・CSS、Word Pressなど、どのような環境で制作していくか
• サイトの基本の構成を考える
• 芸術学部生全体へのアンケートの制作
• アンケートから、足した方がいい項目を考える
• サイトマップの制作
• ワイヤーフレームの制作
• サイトの制作
• 役割を分担し、それぞれで活動する
  
  

テーマ案

• 芸術学部内部用のWebサイト制作(グループ)
  
  

先行事例の調査

• ソーシャルデザイン学科
• 九州産業大学 芸術学部
  
  

プロジェクトミーティング

プロジェクトメモサイト作成