矢幡龍星/卒業研究II

Motorcycle Parking

中型・大型自動二輪車用に特化した駐輪場案内

• Ryusei Yahata
• Keywords：Web design, Graphic design, HTML, CSS,
• 作品リンク : https://19as601-ryusei.github.io/sotsuken/　
  ※Chromeでの閲覧を推奨します。
  ※読み込みに時間がかかる場合があります。
  
  

概要

これは何？

• 中型・大型バイクに特化した駐車場をまとめたサイト
  
  

背景と目的

• 背景
  • 市街地へバイクで出向いた際に、車の駐車場に比べてバイクの駐車場が圧倒的に少なく、駐車場を探すことに苦労した。さらに原動機付自転車の駐輪場は数多く存在しているが、中型・大型自動二輪車のような高排気量のバイクに関しては停められる場所が極端に少なく、見つけるのにもかなりの労力を要する。福岡市が自動二輪車用の駐車場マップをWeb上に公開しているが、1年以上更新されておらず本当にその場所に駐輪場が存在しているのか不安に思うところもあった。友人やSNSでの知人の中にも同様の悩みを持つ人がいた。この問題を解決しバイクで市街地に出かけても快適になるようにしたいと思った。また、近年のバイクブームによりバイクに乗る人が増えているので、このマップを有効活用できると思った。
• 目的
  • サイトを見やすくわかりやすく再構築することで、バイクに乗る人が抱えるストレスや不満を解消したい。そしてバイクをより快適に、日常的に使える環境作りに貢献したい。
    
    

コンセプト

• バイクをもっと日常に。
  • 跨って走り出せば爽快な風と心地よいエンジンの鼓動が感じられる。非日常を味わうことのできるバイクを、より日常で快適に楽しめるようにする。
• 中型・大型バイクに特化させた駐輪場案内
  • バイクの駐車場を探しても原付バイク限定、排気量125cc制限といったところが大半を占めていて、高排気量バイクを停められる場所が見つからないという不便を解消する。
• シンプル is best
  • 分かりやすく情報を完結させることを最優先にする。
    
    

成果物の仕様

• 学科サイト上に公開
  
  

制作ツール

• Visual Studio Code
• Git Hub
• Adobe illustrator
  
  

プロジェクトの期間

2022.04.09 - 2022.12.23

まとめ

中型・大型バイクという少しだけ狭い界隈ではあるが、その中で抱える課題を自らのアイデアとソーシャルデザインの観点から少しばかりは貢献できたと手応えを感じている。制作物に関しては、コンセプト通りに簡潔な情報とスムーズな操作性を組み込んで制作できた。今後も新しい情報や改善したほうが良いところなどがあれば随時アップデートさせていく。また、天神でけでなく他の場所でも需要が見込まれると思うので規模を拡大していきたい。

調査

現状調査

• 福岡市内の自動二輪車の駐車場マップ
  • 天神区域
  • 博多・中洲区域
    
    

先行事例

• 日本二輪車普及安全協会
  • 福岡市中央区の時間貸駐車場
    
    

技法・技術情報

• Visual Studio Code
  • 初心者におすすめのプラグイン
• Git Hub
  • 新しくなった公開方法
    
    
    
    

プロジェクト管理

スケジュール

ToDo

• 既存する駐車場の調査
• Webの準備
• 駐車場の追加
• でのデザイン
• 概要集の更新
• 卒展に向けてブラッシュアップ

2023.1.16

冬休み期間中の記録

• 引き続き制作メイン
• 足りない画像を追加で撮影
  
  

これからやること

• 卒展に向けてブラッシュアップ
  
  
  
  

2022.12.23

図録の制作

• Adobe InDesignを使用してコードを生成
  
  
  
  
• QRコード生成方法
  
  
  
  

2022.12.16

撮影2

• 実際に行ってみても分かりずらい場所があった。

2022.12.9

撮影1

• 様々なタイプの駐輪場があることがわかった。
• 既存のサイト情報と場所と名前が異なっている場所を見つけたので改良する。
  
  
  
  

2022.12.2

これからやるべきこと

• メインビジュアルの変更（制作するサイトと雰囲気のあったもの）
• 駐輪場の写真撮影
• 挿入画像を複数枚にして、スライドショーのアニメーション効果をつける
• Aboutページの制作
• Profileページの制作
• メインビジュアルの変更（制作するサイトと雰囲気のあったもの）
• メニューバーの制作
• フッターの整理

2022.11.18

参考資料の問題点のピックアップ

• どこにどんな名称の駐車場があるのか分かりにくい
• 月極のみの駐車場が記載されている
• 原付の情報も混ざっている
• 入り口の向きが表示されているがいまいち想像できない
  
  
  
  

2022.11.11

制作

• 引き続きWebページの追加
• 概要集の更新
  
  
• 参考にしたサイト
  • シングルカラムレイアウト
  • CSS Flexbox
  • 動くWebデザインアイディア帳
    
    
    
    

2022.10.27

現時点での制作状況

＜＜＜　こちらから　＞＞＞
⇧クリックしてください⇧

今後の制作スケジュールについて

• 駐車場の追加
  • 今は５つ掲載していますが、最終的には７つ追加して合計１２ヶ所の駐車場を掲載する予定です。
• cssでのデザイン
  • htmlでの文書記述がメインで、cssでのデザインや装飾が施されていないため、最終審査までの間はここを重点的に進めて完成させます。
• 概要集の更新
  • 制作段階で重要なことや前期からの大きな変更点をその都度更新していき、作品の完成と同時にまとめ上げていきます。
    
    
    
    

2022.10.21

研究活動を通して期待する効果

• ただ研究をして成果物を作って終わるのではなく、自分ごとに留めずに他人がどう感じるか、良い効果を周りに及ぼせるのかまで繋げていきたい。
  ソーシャルデザインという観点を基本にして本研究を行います。
  
  
  
  

2022.10.14

中間報告前の準備

• メインビジュアルの再掲
  • コンセプトにもあるシンプルという考えに至ったのは、自分がいろんなサイトを見てきてたくさんの情報を詰め込むよりも、本当に必要なことを簡潔に表すこととサイト利用者が操作しやすいUIにすることが大切だと思ったからです。それを踏まえて、新しいメインビジュアルを制作しています。
• Webページの公開
  • Git Hubを用いて、今回制作したWebページのURLを取得したので公開しました。
    
    
    
    

2022.10.7

制作過程

Visual Studio Codeを用いて制作

参考

• HTMLタグ集
• HTML＆CSSとWebデザインが一冊できちんと身につく本
  • 服部 雄樹 / 2017 / 株式会社技術評論社
    
    
    
    

2022.9.30

バイク人気の高まり

• 自分自身が大学生になりコロナ禍をきっかけにバイクに乗り始めたように、ニュースやデータなどから確実にバイクの人気が高まり、バイクに乗る人や興味を持つ人が増えている。
  • 国内販売台数の推移
  • 普通＆大型二輪免許新規取得者の増加
    
    
• しかし、バイク人気に伴う駐車場が少ないという問題も起きている。
  • 供給バランスの難しさ
  • バイク用駐車場の少なさとその歴史
    
    
    
    

2022.9.23

なぜ天神なのか

• 買い物やその他の用事で行くことが多い
• 駐車スペースが限られていて尚且、探し憎かったりみつけにくいことが多々ある
  
  
  
  

2022.9.16

夏休み期間中の記録

• 既存する駐車場の調査
  • 現在、Web上に公開されている情報では市営と民営で記載されている情報が異なっていた。
  • 閉業している場所もあった
    
    

制作環境の設定

• Visual Studio Code
• Git Hub