大村雅人/卒業研究Ⅱ
をテンプレートにして作成
HOME
ABOUT
最新の更新
2021
MEMBER 2021
青木暁光
石坂大翔
出光美心
岩崎貴生
岩下雄真
内尾颯太
江川珠貴
大中啓旦
亀田日向
川村洸太
木村円香
久保絢菜
倉員優実
桑原歩未
鴻上早紀
崔昊
佐光美憂
柴田一輝
竹谷匠冬
田籠祐貴
田代爽乃
内藤彩乃
西山実伶
濱有希子
濱田侑里
藤本唯人
松岡佑樹
松藤陽
村山陽菜
山田宗周
渡邊来美
渡辺侑貴
中西華子
原田朋奈
水田修太朗
宮副咲葉
猪須大翔
川面翔太
隈翔太
柴田葉月
角祐菜
豊岡壮大朗
吉井麻吏菜
2022
MEMBER 2022
棈松智也
梅木悠民
江頭奏
大井このか
大石颯
太田糸音
太田姫奈
越智楓
鎌田真幸
楠田佑月
興梠媛愛
後藤太成
坂井彩華
指方依緒
徐泰陽
杉野市之助
堤晴司
角田雄一
中井千尋
原朋恵
平嶋明日花
増田里奈
深町彩海
藤島早希
宮路咲希
梁井英翔
山口愛麗
山本彩花
松田葉奈
松本龍太郎
石松匡広
上田莉帆
宇田川春稀
宇美希美
佐野美和
竹之内咲希
土斐崎種定
野村優亜
福田千紗
山川彩香
山田侑加子
重松優花
2023
MEMBER 2023
秋月靖雅
浅田真優花
阿南慶子
荒谷唯斗
安藤貴仁
池邉成
井上大河
岩本愛結
梅﨑美和
浦朱里
江村梨里香
大場こころ
勝田喜一
亀崎瑞穂
神田舞
白井くるみ
髙市遥
竹松莉羽
寺田圭志
中村心香
原晴紀
菱谷実来
日山晃良
平崎千夏
福井涼
堀玲二
山口恵
早稲田加奈恵
渡邊優希
石井彩晶
大神槙之介
大熊玄樹
大山花音
岡萌絵子
荻野美咲
鐘ヶ江雅
金田桜子
北村美優香
清野梨果
高庄玲衣
津覇稜也
中川飛鳥
福屋早希乃
脇山千寛
2024
STAFF
専任教員一覧
伊藤敬生
井上貢一
井上友子
岩田敦之
桜井祐
永嶋さゆり
北島己佐吉
OBOG
2023年度卒業生
2022年度卒業生
2021年度卒業生
2020年度卒業生
2019年度卒業生
SESSION
専門科目一覧
ソーシャルデザイン概論
ソーシャルデザイン演習
情報デザイン演習IIA
情報デザイン演習IIB
地域ブランド企画演習IIA
地域ブランド企画演習IIB
視覚デザイン演習
Webデザイン演習
3DCG演習
情報デザイン研究I
地域ブランド企画研究I
卒業研究
教務ガイダンス
RecommendedVideo
BasicKnowledge
PROJECT
LINKS
SEARCH
開始行:
*Ghost
福岡市をGraffittiで塗りつぶしたギャラリーサイト
#image(大村雅人/卒業研究I/FV.jpg)
-''Project Director''
-'''Keywords:Graffiti, Web, '''
-http://miyabi.om1002.coreserver.jp/
-[[ダウンロードファイル>https://drive.google.com/file/d/1...
~
**Overview
***Introduction / What is This
//&color(red){これは何か・・を簡潔に};//
-福岡市内の店の名前や看板などに落書きしたかのように見える...
~
***Background and Purpose
//&color(red){プロジェクトの背景と目的};//
-世間のグラフィティへの評価が低い
-たくさんの人にグラフィティに対する新しい表現の仕方や新し...
~
***Concept
//&color(red){基本的な考え方、枠組み、視点など};//
-描いていくグラフィティはデジタルで公共的なサインやロゴを...
-グラフィティを見せる事によってグラフィティに対しての新た...
-インターネットを利用してグラフィティをアートと認知してい...
~
***Output
//&color(red){成果物の直接掲載またはリンク誘導};//
//&color(red){&small(プロジェクトの途上では、試作品等、視...
//&color(red){&small(成果物の形式・サイズ・時間尺等の基本...
--[[撮影リスト>https://drive.google.com/file/d/1cPnv-ewnI...
-加工済みの写真30枚程度
--[[合成写真一覧>https://drive.google.com/drive/folders/1...
--[[写真一覧>https://drive.google.com/drive/folders/14i9W...
-webサイト
-http://miyabi.om1002.coreserver.jp/
--[[ロゴデザイン>https://drive.google.com/file/d/1eOwq5pI...
--[[web_デザインカンプ(仮)>https://drive.google.com/drive...
--[[web_サイトマップ>https://drive.google.com/file/d/1_VT...
~
***Tools
//&color(red){使用するツール|ハードウエア・ソフトウエア}...
-Photoshop
-Illustrator
-Dreamweaver
-Procreate
-Filezilla
~
***Term
//&color(red){プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX...
-2021.05.07-2022.12.03
~
***Conclusion / Summary
//&color(red){プロジェクトが完結したら「まとめ」を記載し...
~
~
**Survey
***Present Status
//&color(red){現状調査、現状の問題の洗い出し};//
-[[コロナ禍で落書きが急増? なぜ落書きするのか、その心理...
-[[平成 28 年度落書き消去活動アンケート報告>https://www.c...
-[[STOP 方法はあります!~落書きゼロのまちをめざして~>http...
~
***Precedent
//&color(red){先行事例の紹介、傾向分析など};//
***参考サイト
-https://in-art.jp/
-https://io3000.com/category/colors/white/
-https://www.id-frontier.jp/
-https://pin.it/SfYPZwe
~
***カンプ参考サイト
-https://siiimple.com/
-https://io3000.com/
-https://mindsparklemag.com/website/favelagrafia/
-https://dribbble.com/shots/5342869-BeVideo/attachments/1...
~
***Technique / Technology
//&color(red){プロジェクトの遂行に必要な技法・技術に関す...
-写真
--[[背景の撮影方法>https://ichi-up.net/2018/034]]
--[[【Photoshop】「レイヤー効果」だけで超簡単に文字や画像...
--[[Photoshopで写真を壁に描いたように加工する方法>https:/...
~
-web_css
--[[【CSS】超簡単!スクロールしても背景画像が固定されたま...
--[[【CSS】hover時に左から右に下線を引くアニメーションの...
--[[ホバーした時にCSSだけで出来る様々な画像切り替え方法>h...
--[[CSSで要素をふわっと表示させる方法を解説!>https://qum...
~
-web_javascript
--[[【JavaScript・CSS】スクロールしたらフワッと要素を表示...
--[[【jQuery】領域外のクリック時にメニューを閉じるように...
--[[【JQuery】遅延実行でイベントを発生させる方法>https://...
--[[【JavaScript超入門講座】わずか50分で知識ゼロから基礎...
~
~
**Project Management
***Schedule
//&color(red){計画的な遂行のために、進行管理表を作成して...
-[[スケジュール>https://docs.google.com/spreadsheets/d/1v...
-[[10月のスケジュール>https://docs.google.com/spreadsheet...
~
***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。}...
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメ...
-素材撮影
-グラフィティ制作
%%企画立案%%
%%サイトマップ制作%%
%%ワイヤーフレーム制作%%
%%-デザイン制作%%
-コーディング
~
~
~
#hr
CENTER:''worklog''
//&color(red){最新の情報を一番上に記載して下さい(古い記...
#hr
~
~
**2021.12.03
***作業内容
-サイト調整
-プレゼンテーションページ調整
~
~
**2021.11.26
***作業内容
-サイト調整
-プレゼンテーションページ調整
~
~
**2021.11.19
***作業内容
-サイト調整
-プレゼンテーションページ調整
~
~
**2021.11.12
***作業内容
-サイト調整
-プレゼンテーションページ調整
~
~
**2021.11.05
***作業内容
-サイト調整
-プレゼンテーションページ調整
~
~
**2021.10.30
***css
-[[デバイスの向きによってCSSを変更する方法>https://web.ru...
-[[CSSをデバイスの向きにあわせて変更する方法【メディアク...
~
~
**2021.10.29
***ダウンロードファイル
-[[web_link>https://drive.google.com/file/d/1-6UHzwjeqMC0...
**2021.10.26
***更新
***css/javascript
-[[CSSで実装するボタンのホバーエフェクトまとめ>https://ta...
-[[コピペ可能!ナビメニューやリンクの参考にしたいCSSホバ...
-[[htmlやCSSで幅(width)を文字数など中身に合わせる方法>htt...
-[[もう誤魔化さない!CSS Transform完全入門(2D編)>https://...
-[[スクロールすると画像やタイトルがフェードイン表示される...
~
~
**2021.10.22
***更新
-[[合成写真一覧>https://drive.google.com/drive/folders/1-...
-[[サイトデータファイル>https://drive.google.com/file/d/1...
~
~
**2021.10.15
***更新
-http://miyabi.om1002.coreserver.jp/
-[[合成写真一覧>https://drive.google.com/drive/folders/1-...
-[[撮影写真一覧>https://drive.google.com/drive/folders/14...
**2021.10.08
***更新
-[[写真一覧>https://drive.google.com/drive/folders/14i9W0...
-[[撮影リスト候補>https://docs.google.com/spreadsheets/d/...
~
~
**2021.10.04
***調査
***css/JavaScriptアニメーション
-[[画像をクリックしたら、拡大画像がポップアップで表示され...
-[[【CSS】hover時に左から右に下線を引くアニメーションの作...
~
~
**2021.10.01
***更新
-http://miyabi.om1002.coreserver.jp/
-[[撮影リスト候補>https://docs.google.com/spreadsheets/d/...
~
~
***調査
***CSS
-[[WebフォントをCSSの@font-faceで表示する方法>https://shu...
-[[スマホ画面やレスポンシブにした際にできる白い余白・空間...
~
***レスポンシブ
-[[【検証】スマートフォンで読み易いfont-sizeとは?>https:...
-[[CSS グリッドレイアウトでレスポンシブ対応>https://www.s...
~
***撮影
-[[福岡市の 公共施設一覧>https://www.homemate-research.co...
-[[写真撮影における著作権や権利関係>https://www.yakei-pho...
~
***グラフィティ制作イメージ画像
|#image(大村雅人/卒業研究Ⅱ/sample.jpg)|
~
**2021.09.24
***更新
http://miyabi.om1002.coreserver.jp/
***調査
***ツール
-[[出来た…Sublimetext3でブラウザプレビュー View in Browse...
~
***CSS
-[[CSSの疑似要素とは?beforeとafterの使い方まとめ>https:/...
-[[もう迷わない!CSS Flexboxの使い方を徹底解説>https://we...
-[[CSS Grid Layoutを利用して2次元レイアウトを自由自在に操...
-[[CSS Grid と CSS Flexboxの使い分け>https://www.comman.c...
-[[CSS Gridを使ったレスポンシブ対応の基本レイアウト>https...
-[[【CSS】auto-fit・auto-fillの使い方、トラックの幅の指定...
-[[【保存版】コピペでOK!Flexboxで作る頻出レイアウトの構...
-[[[css] レスポンシブの時にdiv要素の順番を入れ替える方法>...
~
***メディアクエリ
-[[メディアクエリの罠!?cssが効かなくなるブラウザサイズ...
~
***Javascript/jquery
-[[スマホorPCのみでjquery/javascriptを実行する>https://ww...
~
~
**2021.08.25~09.18
***サイト更新
-http://miyabi.om1002.coreserver.jp/
~
***調査
***webデザイン便利ツール
-[[【2021年】Web制作に使えるchrome拡張機能おすすめ19選>ht...
-[[感覚で色を選べるカラーピッカー>https://enes.in/sorted-...
~
***メディアクエリ
-[[メディアクエリとは>https://beginners-hp.com/create_sma...
-[[レスポンシブデザインの作り方!簡単にスマホ対応する方法...
~
***HTML
-[[【HTML】親要素と子要素とは!?祖先要素・子孫要素との違...
~
***CSS
-[[レスポンシブが効かない・優先されない【CSS優先順位】>ht...
-[[CSSが効かない・反映されないときの対処法まとめ>https://...
-[[【CSS】初心者必見!CSSで要素を中央揃えにする簡単な方法...
-[[CSSでボックスを中央に配置するやり方を覚える>https://sh...
-[[【CSS】displayの使い方を総まとめ!inlineやblockの違い...
~
**2021.08.24
***調査
***css
-[[margin:0 autoを解説。効かないときの修正方法・代替案>ht...
-[[Flexboxより簡単に複雑なレイアウトが組める「Grid」>http...
-[[中央に配置する>https://www.w3.org/Style/Examples/007/c...
-[[justify-content>https://developer.mozilla.org/ja/docs/...
~
**2021.08.21
***調査
***viewport
-[[【初心者向け】 vh と vw の特徴と % との違いについて>ht...
-[[【CSS】vw、vh、vmin、vmaxとは?基本的な使い方>https://...
~
***cssボタン
-[[CSSボタンデザイン120個以上!どこよりも詳しく作り方を解...
-[[alt属性とは?>https://digitalidentity.co.jp/blog/seo/l...
-[[CSS入門:img画像のスタイルを整える方法>https://proengi...
~
**2021.08.18
***調査
***レスポンシブデザイン
-[[【2021年1月】スマホ用Webデザインはこのアートボードサイ...
-[[レスポンシブデザインの参考事例探しに最適なサイトを総ま...
-[[レスポンシブ対応のフォントサイズを指定>https://coliss....
-[[スマホデザインのフォントサイズの基準は?目安となる国内...
~
***メディアクエリ
-[[CSSのメディアクエリ(@media)クエリについて解説!>https:...
~
***ウィンドウサイズに合わせる
-[[フォントサイズを可変にしてみよう!css関数clampの便利な...
-[[CSSで背景画像をウィンドウサイズに合わせて表示したい>ht...
~
***[[Swiper>https://swiperjs.com/]]
-[[少しずつ画像が変化する、スライダーの作り方解説!>https...
~
~
**2021.08.16
***調査
***[[Swiper>https://swiperjs.com/]]
-フルスクリーンでスライドショーを入れる方法
--[[初心者向け!スライダー実装!JavaScriptの有名なスライ...
--[[Swiperでスライドさせる画像サイズカスタマイズ!上手い...
--[[スライダーの上に文字を固定で表示させる方法!Swiperで...
--[[スライダーのページネーションやナビゲーション(左右の...
~
***リセットCSS
-[[【コピペで出来る】おすすめのリセットCSSと使い方を解説...
~
***HTMLでjavaを読み込む
-[[今すぐ覚えられる!HTMLでJavaScriptを読み込む(呼び出す...
~
~
**2021.07.24
***調査
-[[今更聞けない!エンジニアのための CSS の基礎講座 〜ボッ...
~
**2021.07.16
***調査
***コーディング
-[[Web制作におけるCSSで単位や値を使った設定まとめ>https:/...
~
***撮影
-[[【初心者向け】風景写真をキレイに撮影する7つのコツ!>ht...
-[[初心者向けにカメラ設定の基本を完全ガイド!>https://www...
-[[Lesson8:ISO感度をマスターしよう>https://www.nikon-ima...
-[[Lesson21:最適な「絞り」の見つけかた>https://www.nikon...
-[[デジタル一眼カメラ α(アルファ)で写真撮影を楽しむ>htt...
-[[ピントがうまく合わない(α:アルファ:Eマウント)>https...
~
**2021.07.07
***制作
***コーディング
-[[web_コーディング>https://drive.google.com/drive/folder...
~
***調査
***html/css
-[[CSSでtext-alignを使って文字を配置する方法【初心者向け...
-[[positionプロパティを身に着けよう!基本的な知識と使い方...
-[[positionプロパティを身に着けよう!基本的な知識と使い方...
-[[[CSS]背景画像をブラウザいっぱいに表示するシンプルな最...
-[[【入門】レスポンシブWebデザインとは?概要と作り方を丁...
-[[CSS - @media>https://www.tohoho-web.com/css/rule/media...
-[[CSS|背景画像の上に背景色を重ねる方法>https://cotodama...
-[[お勧めなCSSスライド式サイドバー9選>https://www.seleqt...
-[[【コーディング例あり】模写コーディングのやり方【手順を...
-[[jQueryを使わずにスライドメニューを実装しよう>https://w...
-[[CSSだけでサイドバーを固定・スクロール追従する方法(Jav...
-[[【jQuery】ドロワーメニュー 横からスライド表示するメニ...
**2021.07.06
***調査
***html/css
-[[そもそも親要素・子要素ってなんだ ~トランスペアレント...
-[[スタイルシート(CSS)の基本的な書き方【初心者向け】>ht...
-[[誰でも簡単にできる!HTMLで文字の色を指定する方法【初心...
-[[【次のページへ移動するには?】HTMLのリンクがよくわかる...
-[[ 【2021年版】font-familyの正しい指定方法・タイプ別おす...
-[[1本だけ線を引くCSS>https://www.nishishi.com/css/line-b...
-[[font-size …… フォントのサイズを指定する>http://www.htm...
-[[【CSS】borderの長さを調整する方法3つ:文字に応じて可変...
-[[表示位置を変えたい!CSSでpositionの使い方【初心者向け...
~
**2021.07.02
***制作
***コーディング
-[[web_コーディング>https://drive.google.com/drive/folder...
~
***調査
***html/css
-[[シングルページの作り方は?メリットとテンプレートを紹介...
-[[【永久保存版】デザイン初心者でも美しいサイトが作れる!...
-[[テンプレートNo.001タイプのマニュアル>https://f-tpl.com...
-[[ナビメニュー100連発!CSSで表現できるコピペ可能なHTMLス...
-[[3分で丸わかり!HTMLで画像をリンクにする簡単な方法とは>...
-[[HTML・CSSで背景画像を画面いっぱいに全画面表示する方法...
-[[【HTML div】divタグとは?使い方を基礎から徹底解説|HTM...
***webフォント
-[[【まとめ】Webフォントの使い方!完全ガイド 初級編【202...
***解像度
-[[Photoshopでjpgのdpiを指定して書き出す方法とjpgの解像度...
-[[WebデザインやSEOを向上させる画像最適化の方法とは?>htt...
~
**2021.06.25
***制作
***ロゴ制作
-[[ロゴデザイン>https://drive.google.com/file/d/1eOwq5pIi...
~
***更新
-[[web_デザインカンプ(仮)>https://drive.google.com/drive/...
~
***調査
-[[現役デザイナーが解説!フッターデザインの参考事例と注意...
-[[I/O 3000>https://io3000.com/]]
-[[Pinterest>https://www.pinterest.jp/]]
~
**2021.06.17
***制作
|#image(大村雅人/卒業研究I/4.jpg)|
~
-[[加工写真>https://drive.google.com/drive/folders/1KjFBG...
-[[撮影写真一覧>https://drive.google.com/drive/folders/1a...
***調査
-[[【Photoshop】「レイヤー効果」だけで超簡単に文字や画像...
-[[Photoshopで写真を壁に描いたように加工する方法>https://...
~
**2021.06.16
***制作
***ロゴ制作
-[[web_ロゴ>https://drive.google.com/file/d/1VrGHp04E85n9...
***更新
-[[web_デザインカンプ(仮)>https://drive.google.com/file/d...
~
**2021.06.15
***タイトル決め
-Ghost
-意味:実際には存在しない架空の写真を載せるから
~
***制作
-[[web_デザインカンプ(仮)>https://drive.google.com/drive/...
-[[web_ワイヤーフレーム(仮)>https://drive.google.com/driv...
-[[web_サイトマップ(仮)>https://drive.google.com/file/d/1...
~
***調査
***サイトマップ
-[[Webサイト制作で参考になるサイトマップのデザインまとめ>...
~
***ワイヤーフレーム
-[[WEBデザインでよく聞く「カラム」について>https://www.at...
-[[HP作成の初心者でワイヤーフレームの作り方をよく知らない...
-[[ワイヤーフレームの作り方完全ガイド【サンプル付き】>htt...
~
***デザインカンプ
-[[【見本あり】デザインカンプの作り方とコツを現役webデザ...
-[[【かんたん】デザインカンプの作り方、0から丁寧にわかり...
-[[Webサイトにおける文章を読みやすくするデザインのポイン...
-[[デザインから感じる「印象」を詳しく解説!企業イメージを...
~
***タイトル決め
-[[事例に学ぶ!集客できるサイト名の決め方と9つのポイント...
~
***参考webデザイン集
-https://liginc.co.jp/416443
~
~
**2021.05.19
***制作
|#image(大村雅人/卒業研究I/3.jpg)|
***調査
***ギャラリーサイト集
-https://andspace.net/blog/sitemap/
***サイトマップの作り方
-https://andspace.net/blog/sitemap/
~
**2021.05.12
***テーマ案
-福岡市の街の標識や看板をグラフィティ化した写真を載せるサ...
~
***試作
|49|2|49|c
|#image(大村雅人/卒業研究I/1.jpg)| |#image(大村雅人/卒業...
**2021.05.11
***グラフィティとは
-グラフィティ (graffiti) は、エアロゾールアート (aerosol ...
~
-語源はイタリア語の「graffio」からきていて、“引っかくこと...
~
***グラフィティの歴史
***1800年代
-1800年代後半にはアメリカでBozo Texinoと鉄道員たちが工業...
~
***1900年代
-第2次世界大戦中と終戦後の1940年辺りは、坊主頭と長い鼻の...
~
-1960年代に入ると、55年に亡くなったジャズ界のサックスフォ...
~
-1970年代にニューヨークのダウンタウンで始まったとされ、ス...
~
-70年初頭、グラフィティムーブメントの中心はフィラデルフィ...
~
-1980年代には、ダウンタウンの黒人文化とされていたNYのグラ...
~
***グラフィティの種類(描き方)
-タグ(tag)
--グラフィティライターの名前やサインのこと。
~
-スローアップ(throw-up)
--2色ほどで書かれ、アウトラインで構成されたもの。
~
-ブロックバスタ(Block Buster)
--ブロック状の文字で書かれた巨大なグラフィティ。短時間で...
~
-ピース(Piece)
--3色以上使い、タグまで添えられたものなど、完成されたグラ...
~
-ワイルドスタイル(Wild Style)
--巧妙なスローアップで、複雑に組み合わされたものなので、...
~
~
***参照リンク
-[[グラフィティの歴史や書き方を画像で解説!アーティストも...
-[[wiki>https://ja.wikipedia.org/wiki/%E3%82%B0%E3%83%A9%...
-[[ヒップホップのグラフィティカルチャー、古代からNYへの壮...
**2021.05.06
***テーマ案
-ロゴ×塗りつぶす
~
-有名ブランドのロゴをグラフィティ風に制作したものを載せる...
-ロゴのデザインの重要性、グラフィティのかっこよさを伝える...
~
***参考リンク
-[[マッシュアップしたロゴデザインの比較サイト>https://blo...
-[[logo制作>https://pin.it/3H6zB1j]]
~
**2021.04.22
***テーマ案
-グラフィティ×webサイト
--自分で好みのグラフィティをカスタマイズできるサイト
~
***参考リンク
-[[野村麗奈/卒業研究Ⅰ>http://design.kyusan-u.ac.jp/social...
-[[アイコンメーカー>http://furrytail.sakura.ne.jp/ext/ico...
-[[キャラクターメイカー>https://picrew.me/]]
***既存サイト
-[[有料グラフィティ変換サイト>https://www.graffiticreator...
-[[無料グラフィティ変換サイト>https://fontmeme.com/ja/fon...
-[[テキストデザイン変換サイト1>https://fontmeme.com/ja/fo...
-[[テキストデザイン変換サイト2>https://ja.cooltext.com]]
~
**2021.04.20
***テーマ再考
***参考リンク
-[[神戸アートビレッジセンター>https://www.kavc.or.jp/repo...
-[[ゴミがアート作品に!ある産廃処理業者の挑戦が集めた予想...
~
**2021.04.16
***テーマ案
-落書き問題×Graphic design&web design
--福岡市のリーガルウォールを設置した体験型の架空の店のDTP...
~
***参考リンク
-[[水戸のリーガルウォール>http://www.asahi-net.or.jp/~up5...
-[[大阪のリーガルウォール>https://www.wallshare-inc.com/]]
~
~
~
終了行:
*Ghost
福岡市をGraffittiで塗りつぶしたギャラリーサイト
#image(大村雅人/卒業研究I/FV.jpg)
-''Project Director''
-'''Keywords:Graffiti, Web, '''
-http://miyabi.om1002.coreserver.jp/
-[[ダウンロードファイル>https://drive.google.com/file/d/1...
~
**Overview
***Introduction / What is This
//&color(red){これは何か・・を簡潔に};//
-福岡市内の店の名前や看板などに落書きしたかのように見える...
~
***Background and Purpose
//&color(red){プロジェクトの背景と目的};//
-世間のグラフィティへの評価が低い
-たくさんの人にグラフィティに対する新しい表現の仕方や新し...
~
***Concept
//&color(red){基本的な考え方、枠組み、視点など};//
-描いていくグラフィティはデジタルで公共的なサインやロゴを...
-グラフィティを見せる事によってグラフィティに対しての新た...
-インターネットを利用してグラフィティをアートと認知してい...
~
***Output
//&color(red){成果物の直接掲載またはリンク誘導};//
//&color(red){&small(プロジェクトの途上では、試作品等、視...
//&color(red){&small(成果物の形式・サイズ・時間尺等の基本...
--[[撮影リスト>https://drive.google.com/file/d/1cPnv-ewnI...
-加工済みの写真30枚程度
--[[合成写真一覧>https://drive.google.com/drive/folders/1...
--[[写真一覧>https://drive.google.com/drive/folders/14i9W...
-webサイト
-http://miyabi.om1002.coreserver.jp/
--[[ロゴデザイン>https://drive.google.com/file/d/1eOwq5pI...
--[[web_デザインカンプ(仮)>https://drive.google.com/drive...
--[[web_サイトマップ>https://drive.google.com/file/d/1_VT...
~
***Tools
//&color(red){使用するツール|ハードウエア・ソフトウエア}...
-Photoshop
-Illustrator
-Dreamweaver
-Procreate
-Filezilla
~
***Term
//&color(red){プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX...
-2021.05.07-2022.12.03
~
***Conclusion / Summary
//&color(red){プロジェクトが完結したら「まとめ」を記載し...
~
~
**Survey
***Present Status
//&color(red){現状調査、現状の問題の洗い出し};//
-[[コロナ禍で落書きが急増? なぜ落書きするのか、その心理...
-[[平成 28 年度落書き消去活動アンケート報告>https://www.c...
-[[STOP 方法はあります!~落書きゼロのまちをめざして~>http...
~
***Precedent
//&color(red){先行事例の紹介、傾向分析など};//
***参考サイト
-https://in-art.jp/
-https://io3000.com/category/colors/white/
-https://www.id-frontier.jp/
-https://pin.it/SfYPZwe
~
***カンプ参考サイト
-https://siiimple.com/
-https://io3000.com/
-https://mindsparklemag.com/website/favelagrafia/
-https://dribbble.com/shots/5342869-BeVideo/attachments/1...
~
***Technique / Technology
//&color(red){プロジェクトの遂行に必要な技法・技術に関す...
-写真
--[[背景の撮影方法>https://ichi-up.net/2018/034]]
--[[【Photoshop】「レイヤー効果」だけで超簡単に文字や画像...
--[[Photoshopで写真を壁に描いたように加工する方法>https:/...
~
-web_css
--[[【CSS】超簡単!スクロールしても背景画像が固定されたま...
--[[【CSS】hover時に左から右に下線を引くアニメーションの...
--[[ホバーした時にCSSだけで出来る様々な画像切り替え方法>h...
--[[CSSで要素をふわっと表示させる方法を解説!>https://qum...
~
-web_javascript
--[[【JavaScript・CSS】スクロールしたらフワッと要素を表示...
--[[【jQuery】領域外のクリック時にメニューを閉じるように...
--[[【JQuery】遅延実行でイベントを発生させる方法>https://...
--[[【JavaScript超入門講座】わずか50分で知識ゼロから基礎...
~
~
**Project Management
***Schedule
//&color(red){計画的な遂行のために、進行管理表を作成して...
-[[スケジュール>https://docs.google.com/spreadsheets/d/1v...
-[[10月のスケジュール>https://docs.google.com/spreadsheet...
~
***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。}...
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメ...
-素材撮影
-グラフィティ制作
%%企画立案%%
%%サイトマップ制作%%
%%ワイヤーフレーム制作%%
%%-デザイン制作%%
-コーディング
~
~
~
#hr
CENTER:''worklog''
//&color(red){最新の情報を一番上に記載して下さい(古い記...
#hr
~
~
**2021.12.03
***作業内容
-サイト調整
-プレゼンテーションページ調整
~
~
**2021.11.26
***作業内容
-サイト調整
-プレゼンテーションページ調整
~
~
**2021.11.19
***作業内容
-サイト調整
-プレゼンテーションページ調整
~
~
**2021.11.12
***作業内容
-サイト調整
-プレゼンテーションページ調整
~
~
**2021.11.05
***作業内容
-サイト調整
-プレゼンテーションページ調整
~
~
**2021.10.30
***css
-[[デバイスの向きによってCSSを変更する方法>https://web.ru...
-[[CSSをデバイスの向きにあわせて変更する方法【メディアク...
~
~
**2021.10.29
***ダウンロードファイル
-[[web_link>https://drive.google.com/file/d/1-6UHzwjeqMC0...
**2021.10.26
***更新
***css/javascript
-[[CSSで実装するボタンのホバーエフェクトまとめ>https://ta...
-[[コピペ可能!ナビメニューやリンクの参考にしたいCSSホバ...
-[[htmlやCSSで幅(width)を文字数など中身に合わせる方法>htt...
-[[もう誤魔化さない!CSS Transform完全入門(2D編)>https://...
-[[スクロールすると画像やタイトルがフェードイン表示される...
~
~
**2021.10.22
***更新
-[[合成写真一覧>https://drive.google.com/drive/folders/1-...
-[[サイトデータファイル>https://drive.google.com/file/d/1...
~
~
**2021.10.15
***更新
-http://miyabi.om1002.coreserver.jp/
-[[合成写真一覧>https://drive.google.com/drive/folders/1-...
-[[撮影写真一覧>https://drive.google.com/drive/folders/14...
**2021.10.08
***更新
-[[写真一覧>https://drive.google.com/drive/folders/14i9W0...
-[[撮影リスト候補>https://docs.google.com/spreadsheets/d/...
~
~
**2021.10.04
***調査
***css/JavaScriptアニメーション
-[[画像をクリックしたら、拡大画像がポップアップで表示され...
-[[【CSS】hover時に左から右に下線を引くアニメーションの作...
~
~
**2021.10.01
***更新
-http://miyabi.om1002.coreserver.jp/
-[[撮影リスト候補>https://docs.google.com/spreadsheets/d/...
~
~
***調査
***CSS
-[[WebフォントをCSSの@font-faceで表示する方法>https://shu...
-[[スマホ画面やレスポンシブにした際にできる白い余白・空間...
~
***レスポンシブ
-[[【検証】スマートフォンで読み易いfont-sizeとは?>https:...
-[[CSS グリッドレイアウトでレスポンシブ対応>https://www.s...
~
***撮影
-[[福岡市の 公共施設一覧>https://www.homemate-research.co...
-[[写真撮影における著作権や権利関係>https://www.yakei-pho...
~
***グラフィティ制作イメージ画像
|#image(大村雅人/卒業研究Ⅱ/sample.jpg)|
~
**2021.09.24
***更新
http://miyabi.om1002.coreserver.jp/
***調査
***ツール
-[[出来た…Sublimetext3でブラウザプレビュー View in Browse...
~
***CSS
-[[CSSの疑似要素とは?beforeとafterの使い方まとめ>https:/...
-[[もう迷わない!CSS Flexboxの使い方を徹底解説>https://we...
-[[CSS Grid Layoutを利用して2次元レイアウトを自由自在に操...
-[[CSS Grid と CSS Flexboxの使い分け>https://www.comman.c...
-[[CSS Gridを使ったレスポンシブ対応の基本レイアウト>https...
-[[【CSS】auto-fit・auto-fillの使い方、トラックの幅の指定...
-[[【保存版】コピペでOK!Flexboxで作る頻出レイアウトの構...
-[[[css] レスポンシブの時にdiv要素の順番を入れ替える方法>...
~
***メディアクエリ
-[[メディアクエリの罠!?cssが効かなくなるブラウザサイズ...
~
***Javascript/jquery
-[[スマホorPCのみでjquery/javascriptを実行する>https://ww...
~
~
**2021.08.25~09.18
***サイト更新
-http://miyabi.om1002.coreserver.jp/
~
***調査
***webデザイン便利ツール
-[[【2021年】Web制作に使えるchrome拡張機能おすすめ19選>ht...
-[[感覚で色を選べるカラーピッカー>https://enes.in/sorted-...
~
***メディアクエリ
-[[メディアクエリとは>https://beginners-hp.com/create_sma...
-[[レスポンシブデザインの作り方!簡単にスマホ対応する方法...
~
***HTML
-[[【HTML】親要素と子要素とは!?祖先要素・子孫要素との違...
~
***CSS
-[[レスポンシブが効かない・優先されない【CSS優先順位】>ht...
-[[CSSが効かない・反映されないときの対処法まとめ>https://...
-[[【CSS】初心者必見!CSSで要素を中央揃えにする簡単な方法...
-[[CSSでボックスを中央に配置するやり方を覚える>https://sh...
-[[【CSS】displayの使い方を総まとめ!inlineやblockの違い...
~
**2021.08.24
***調査
***css
-[[margin:0 autoを解説。効かないときの修正方法・代替案>ht...
-[[Flexboxより簡単に複雑なレイアウトが組める「Grid」>http...
-[[中央に配置する>https://www.w3.org/Style/Examples/007/c...
-[[justify-content>https://developer.mozilla.org/ja/docs/...
~
**2021.08.21
***調査
***viewport
-[[【初心者向け】 vh と vw の特徴と % との違いについて>ht...
-[[【CSS】vw、vh、vmin、vmaxとは?基本的な使い方>https://...
~
***cssボタン
-[[CSSボタンデザイン120個以上!どこよりも詳しく作り方を解...
-[[alt属性とは?>https://digitalidentity.co.jp/blog/seo/l...
-[[CSS入門:img画像のスタイルを整える方法>https://proengi...
~
**2021.08.18
***調査
***レスポンシブデザイン
-[[【2021年1月】スマホ用Webデザインはこのアートボードサイ...
-[[レスポンシブデザインの参考事例探しに最適なサイトを総ま...
-[[レスポンシブ対応のフォントサイズを指定>https://coliss....
-[[スマホデザインのフォントサイズの基準は?目安となる国内...
~
***メディアクエリ
-[[CSSのメディアクエリ(@media)クエリについて解説!>https:...
~
***ウィンドウサイズに合わせる
-[[フォントサイズを可変にしてみよう!css関数clampの便利な...
-[[CSSで背景画像をウィンドウサイズに合わせて表示したい>ht...
~
***[[Swiper>https://swiperjs.com/]]
-[[少しずつ画像が変化する、スライダーの作り方解説!>https...
~
~
**2021.08.16
***調査
***[[Swiper>https://swiperjs.com/]]
-フルスクリーンでスライドショーを入れる方法
--[[初心者向け!スライダー実装!JavaScriptの有名なスライ...
--[[Swiperでスライドさせる画像サイズカスタマイズ!上手い...
--[[スライダーの上に文字を固定で表示させる方法!Swiperで...
--[[スライダーのページネーションやナビゲーション(左右の...
~
***リセットCSS
-[[【コピペで出来る】おすすめのリセットCSSと使い方を解説...
~
***HTMLでjavaを読み込む
-[[今すぐ覚えられる!HTMLでJavaScriptを読み込む(呼び出す...
~
~
**2021.07.24
***調査
-[[今更聞けない!エンジニアのための CSS の基礎講座 〜ボッ...
~
**2021.07.16
***調査
***コーディング
-[[Web制作におけるCSSで単位や値を使った設定まとめ>https:/...
~
***撮影
-[[【初心者向け】風景写真をキレイに撮影する7つのコツ!>ht...
-[[初心者向けにカメラ設定の基本を完全ガイド!>https://www...
-[[Lesson8:ISO感度をマスターしよう>https://www.nikon-ima...
-[[Lesson21:最適な「絞り」の見つけかた>https://www.nikon...
-[[デジタル一眼カメラ α(アルファ)で写真撮影を楽しむ>htt...
-[[ピントがうまく合わない(α:アルファ:Eマウント)>https...
~
**2021.07.07
***制作
***コーディング
-[[web_コーディング>https://drive.google.com/drive/folder...
~
***調査
***html/css
-[[CSSでtext-alignを使って文字を配置する方法【初心者向け...
-[[positionプロパティを身に着けよう!基本的な知識と使い方...
-[[positionプロパティを身に着けよう!基本的な知識と使い方...
-[[[CSS]背景画像をブラウザいっぱいに表示するシンプルな最...
-[[【入門】レスポンシブWebデザインとは?概要と作り方を丁...
-[[CSS - @media>https://www.tohoho-web.com/css/rule/media...
-[[CSS|背景画像の上に背景色を重ねる方法>https://cotodama...
-[[お勧めなCSSスライド式サイドバー9選>https://www.seleqt...
-[[【コーディング例あり】模写コーディングのやり方【手順を...
-[[jQueryを使わずにスライドメニューを実装しよう>https://w...
-[[CSSだけでサイドバーを固定・スクロール追従する方法(Jav...
-[[【jQuery】ドロワーメニュー 横からスライド表示するメニ...
**2021.07.06
***調査
***html/css
-[[そもそも親要素・子要素ってなんだ ~トランスペアレント...
-[[スタイルシート(CSS)の基本的な書き方【初心者向け】>ht...
-[[誰でも簡単にできる!HTMLで文字の色を指定する方法【初心...
-[[【次のページへ移動するには?】HTMLのリンクがよくわかる...
-[[ 【2021年版】font-familyの正しい指定方法・タイプ別おす...
-[[1本だけ線を引くCSS>https://www.nishishi.com/css/line-b...
-[[font-size …… フォントのサイズを指定する>http://www.htm...
-[[【CSS】borderの長さを調整する方法3つ:文字に応じて可変...
-[[表示位置を変えたい!CSSでpositionの使い方【初心者向け...
~
**2021.07.02
***制作
***コーディング
-[[web_コーディング>https://drive.google.com/drive/folder...
~
***調査
***html/css
-[[シングルページの作り方は?メリットとテンプレートを紹介...
-[[【永久保存版】デザイン初心者でも美しいサイトが作れる!...
-[[テンプレートNo.001タイプのマニュアル>https://f-tpl.com...
-[[ナビメニュー100連発!CSSで表現できるコピペ可能なHTMLス...
-[[3分で丸わかり!HTMLで画像をリンクにする簡単な方法とは>...
-[[HTML・CSSで背景画像を画面いっぱいに全画面表示する方法...
-[[【HTML div】divタグとは?使い方を基礎から徹底解説|HTM...
***webフォント
-[[【まとめ】Webフォントの使い方!完全ガイド 初級編【202...
***解像度
-[[Photoshopでjpgのdpiを指定して書き出す方法とjpgの解像度...
-[[WebデザインやSEOを向上させる画像最適化の方法とは?>htt...
~
**2021.06.25
***制作
***ロゴ制作
-[[ロゴデザイン>https://drive.google.com/file/d/1eOwq5pIi...
~
***更新
-[[web_デザインカンプ(仮)>https://drive.google.com/drive/...
~
***調査
-[[現役デザイナーが解説!フッターデザインの参考事例と注意...
-[[I/O 3000>https://io3000.com/]]
-[[Pinterest>https://www.pinterest.jp/]]
~
**2021.06.17
***制作
|#image(大村雅人/卒業研究I/4.jpg)|
~
-[[加工写真>https://drive.google.com/drive/folders/1KjFBG...
-[[撮影写真一覧>https://drive.google.com/drive/folders/1a...
***調査
-[[【Photoshop】「レイヤー効果」だけで超簡単に文字や画像...
-[[Photoshopで写真を壁に描いたように加工する方法>https://...
~
**2021.06.16
***制作
***ロゴ制作
-[[web_ロゴ>https://drive.google.com/file/d/1VrGHp04E85n9...
***更新
-[[web_デザインカンプ(仮)>https://drive.google.com/file/d...
~
**2021.06.15
***タイトル決め
-Ghost
-意味:実際には存在しない架空の写真を載せるから
~
***制作
-[[web_デザインカンプ(仮)>https://drive.google.com/drive/...
-[[web_ワイヤーフレーム(仮)>https://drive.google.com/driv...
-[[web_サイトマップ(仮)>https://drive.google.com/file/d/1...
~
***調査
***サイトマップ
-[[Webサイト制作で参考になるサイトマップのデザインまとめ>...
~
***ワイヤーフレーム
-[[WEBデザインでよく聞く「カラム」について>https://www.at...
-[[HP作成の初心者でワイヤーフレームの作り方をよく知らない...
-[[ワイヤーフレームの作り方完全ガイド【サンプル付き】>htt...
~
***デザインカンプ
-[[【見本あり】デザインカンプの作り方とコツを現役webデザ...
-[[【かんたん】デザインカンプの作り方、0から丁寧にわかり...
-[[Webサイトにおける文章を読みやすくするデザインのポイン...
-[[デザインから感じる「印象」を詳しく解説!企業イメージを...
~
***タイトル決め
-[[事例に学ぶ!集客できるサイト名の決め方と9つのポイント...
~
***参考webデザイン集
-https://liginc.co.jp/416443
~
~
**2021.05.19
***制作
|#image(大村雅人/卒業研究I/3.jpg)|
***調査
***ギャラリーサイト集
-https://andspace.net/blog/sitemap/
***サイトマップの作り方
-https://andspace.net/blog/sitemap/
~
**2021.05.12
***テーマ案
-福岡市の街の標識や看板をグラフィティ化した写真を載せるサ...
~
***試作
|49|2|49|c
|#image(大村雅人/卒業研究I/1.jpg)| |#image(大村雅人/卒業...
**2021.05.11
***グラフィティとは
-グラフィティ (graffiti) は、エアロゾールアート (aerosol ...
~
-語源はイタリア語の「graffio」からきていて、“引っかくこと...
~
***グラフィティの歴史
***1800年代
-1800年代後半にはアメリカでBozo Texinoと鉄道員たちが工業...
~
***1900年代
-第2次世界大戦中と終戦後の1940年辺りは、坊主頭と長い鼻の...
~
-1960年代に入ると、55年に亡くなったジャズ界のサックスフォ...
~
-1970年代にニューヨークのダウンタウンで始まったとされ、ス...
~
-70年初頭、グラフィティムーブメントの中心はフィラデルフィ...
~
-1980年代には、ダウンタウンの黒人文化とされていたNYのグラ...
~
***グラフィティの種類(描き方)
-タグ(tag)
--グラフィティライターの名前やサインのこと。
~
-スローアップ(throw-up)
--2色ほどで書かれ、アウトラインで構成されたもの。
~
-ブロックバスタ(Block Buster)
--ブロック状の文字で書かれた巨大なグラフィティ。短時間で...
~
-ピース(Piece)
--3色以上使い、タグまで添えられたものなど、完成されたグラ...
~
-ワイルドスタイル(Wild Style)
--巧妙なスローアップで、複雑に組み合わされたものなので、...
~
~
***参照リンク
-[[グラフィティの歴史や書き方を画像で解説!アーティストも...
-[[wiki>https://ja.wikipedia.org/wiki/%E3%82%B0%E3%83%A9%...
-[[ヒップホップのグラフィティカルチャー、古代からNYへの壮...
**2021.05.06
***テーマ案
-ロゴ×塗りつぶす
~
-有名ブランドのロゴをグラフィティ風に制作したものを載せる...
-ロゴのデザインの重要性、グラフィティのかっこよさを伝える...
~
***参考リンク
-[[マッシュアップしたロゴデザインの比較サイト>https://blo...
-[[logo制作>https://pin.it/3H6zB1j]]
~
**2021.04.22
***テーマ案
-グラフィティ×webサイト
--自分で好みのグラフィティをカスタマイズできるサイト
~
***参考リンク
-[[野村麗奈/卒業研究Ⅰ>http://design.kyusan-u.ac.jp/social...
-[[アイコンメーカー>http://furrytail.sakura.ne.jp/ext/ico...
-[[キャラクターメイカー>https://picrew.me/]]
***既存サイト
-[[有料グラフィティ変換サイト>https://www.graffiticreator...
-[[無料グラフィティ変換サイト>https://fontmeme.com/ja/fon...
-[[テキストデザイン変換サイト1>https://fontmeme.com/ja/fo...
-[[テキストデザイン変換サイト2>https://ja.cooltext.com]]
~
**2021.04.20
***テーマ再考
***参考リンク
-[[神戸アートビレッジセンター>https://www.kavc.or.jp/repo...
-[[ゴミがアート作品に!ある産廃処理業者の挑戦が集めた予想...
~
**2021.04.16
***テーマ案
-落書き問題×Graphic design&web design
--福岡市のリーガルウォールを設置した体験型の架空の店のDTP...
~
***参考リンク
-[[水戸のリーガルウォール>http://www.asahi-net.or.jp/~up5...
-[[大阪のリーガルウォール>https://www.wallshare-inc.com/]]
~
~
~
ページ名: