Ghost
福岡市をGraffittiで塗りつぶしたギャラリーサイト
- Project Director
- Keywords:Graffiti, Web,
Overview
Introduction / What is This
- 福岡市内の店の名前や看板などに落書きしたかのように見える加工した写真を掲載するギャラリーサイト
Background and Purpose
- 世間のグラフィティへの評価が低い
- たくさんの人にグラフィティに対する新しい表現の仕方や新しい価値など多角的な視点でグラフィティの魅力を見出す方法をみつける。
Concept
- 描いていくグラフィティはデジタルで公共的なサインやロゴを描き変えていく。
- グラフィティを見せる事によってグラフィティに対しての新たな発見や価値などを見つける事ができ理解を深めてもらうため
- インターネットを利用してグラフィティをアートと認知していない人に写真を見て貰うため、ギャラリーサイトを制作していく。
Output
- 加工済みの写真30枚程度
- webサイト
- http://miyabi.om1002.coreserver.jp/
Tools
- Photoshop
- Illustrator
- Dreamweaver
- Procreate
- Filezilla
Term
- 2021.05.07-2022.12.03
Conclusion / Summary
Survey
Present Status
Precedent
参考サイト
- 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/1158963
Technique / Technology
- 写真
- web
Project Management
Schedule
ToDo
- 素材撮影
- グラフィティ制作
企画立案
サイトマップ制作
ワイヤーフレーム制作 - デザイン制作
- コーディング
worklog
2021.08.25~09.18
サイト更新
調査
webデザイン便利ツール
メディアクエリ
HTML
CSS
- レスポンシブが効かない・優先されない【CSS優先順位】
- CSSが効かない・反映されないときの対処法まとめ
- 【CSS】初心者必見!CSSで要素を中央揃えにする簡単な方法!【追記有り】
- CSSでボックスを中央に配置するやり方を覚える
- 【CSS】displayの使い方を総まとめ!inlineやblockの違いは?
2021.08.24
調査
css
2021.08.21
調査
viewport
cssボタン
2021.08.18
調査
レスポンシブデザイン
- 【2021年1月】スマホ用Webデザインはこのアートボードサイズで作ろう!
- レスポンシブデザインの参考事例探しに最適なサイトを総まとめ!【2021年版】
- レスポンシブ対応のフォントサイズを指定
- スマホデザインのフォントサイズの基準は?目安となる国内サイトを大調査!
メディアクエリ
ウィンドウサイズに合わせる
Swiper
2021.08.16
調査
Swiper
- フルスクリーンでスライドショーを入れる方法
リセットCSS
HTMLでjavaを読み込む
2021.07.24
調査
2021.07.16
調査
コーディング
撮影
- 【初心者向け】風景写真をキレイに撮影する7つのコツ!
- 初心者向けにカメラ設定の基本を完全ガイド!
- Lesson8:ISO感度をマスターしよう
- Lesson21:最適な「絞り」の見つけかた
- デジタル一眼カメラ α(アルファ)で写真撮影を楽しむ
- ピントがうまく合わない(α:アルファ:Eマウント)
2021.07.07
制作
コーディング
調査
html/css
- CSSでtext-alignを使って文字を配置する方法【初心者向け】
- positionプロパティを身に着けよう!基本的な知識と使い方を解説!
- positionプロパティを身に着けよう!基本的な知識と使い方を解説!(基礎編)
- [CSS]背景画像をブラウザいっぱいに表示するシンプルな最新テクニック
- 【入門】レスポンシブWebデザインとは?概要と作り方を丁寧解説
- CSS - @media
- CSS|背景画像の上に背景色を重ねる方法
- お勧めなCSSスライド式サイドバー9選
- 【コーディング例あり】模写コーディングのやり方【手順を解説】
- jQueryを使わずにスライドメニューを実装しよう
- CSSだけでサイドバーを固定・スクロール追従する方法(JavaScript不要)
- 【jQuery】ドロワーメニュー 横からスライド表示するメニュー
2021.07.06
調査
html/css
- そもそも親要素・子要素ってなんだ ~トランスペアレントがわからない~
- スタイルシート(CSS)の基本的な書き方【初心者向け】
- 誰でも簡単にできる!HTMLで文字の色を指定する方法【初心者向け】
- 【次のページへ移動するには?】HTMLのリンクがよくわかる解説
- 【2021年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例
- 1本だけ線を引くCSS
- font-size …… フォントのサイズを指定する
- 【CSS】borderの長さを調整する方法3つ:文字に応じて可変など
- 表示位置を変えたい!CSSでpositionの使い方【初心者向け】
2021.07.02
制作
コーディング
調査
html/css
- シングルページの作り方は?メリットとテンプレートを紹介
- 【永久保存版】デザイン初心者でも美しいサイトが作れる!無料で使えるHTML&CSSテンプレート20選
- テンプレートNo.001タイプのマニュアル
- ナビメニュー100連発!CSSで表現できるコピペ可能なHTMLスニペットまとめ
- 3分で丸わかり!HTMLで画像をリンクにする簡単な方法とは
- HTML・CSSで背景画像を画面いっぱいに全画面表示する方法!
- 【HTML div】divタグとは?使い方を基礎から徹底解説|HTML&CSS入門
webフォント
解像度
2021.06.25
制作
ロゴ制作
更新
調査
2021.06.17
制作
調査
2021.06.16
制作
ロゴ制作
更新
2021.06.15
タイトル決め
- Ghost
- 意味:実際には存在しない架空の写真を載せるから
制作
調査
サイトマップ
ワイヤーフレーム
デザインカンプ
- 【見本あり】デザインカンプの作り方とコツを現役webデザイナーが解説
- 【かんたん】デザインカンプの作り方、0から丁寧にわかりやすく図解します!
- Webサイトにおける文章を読みやすくするデザインのポイントについて
- デザインから感じる「印象」を詳しく解説!企業イメージをWebサイトにうまく反映したサイト4選
タイトル決め
参考webデザイン集
2021.05.19
制作
調査
ギャラリーサイト集
サイトマップの作り方
2021.05.12
テーマ案
- 福岡市の街の標識や看板をグラフィティ化した写真を載せるサイトを制作
試作
2021.05.11
グラフィティとは
- グラフィティ (graffiti) は、エアロゾールアート (aerosol art) ともいい、スプレーやフェルトペンなどを使い、壁などに描かれた図像のことである。グラフィティを描く者のことを、ライター (writer) やペインター (painter) という。日本ではグラフィティを落書き(scribble)と言い表すこともある。
- 語源はイタリア語の「graffio」からきていて、“引っかくこと”や“引っかれたもの”などの意味を持ちます。さらに遡るとギリシャ語の「graphein」(=書く、描く、引っかく)になり、古代におけるグラフィティとは尖ったものやチョーク、石炭などを使って壁を引っかいて描いたものを意味したそうです。
グラフィティの歴史
1800年代
- 1800年代後半にはアメリカでBozo Texinoと鉄道員たちが工業用クレヨンを使い、自分たちの物語や時間を知らない人たちと共有するために、移動する列車にグラフィティを描いた。それはモニカー(Moniker)と呼ばれる技術で描かれており、初期のモダングラフィティ作品の一つとされている。
1900年代
- 第2次世界大戦中と終戦後の1940年辺りは、坊主頭と長い鼻の男が壁越しにこちらを見ている画に「Kilroy was here」(=キルロイはここにいた)と描かれたものが流行り、トラックやタンク、船やトイレなどあらゆるところで見られたそうです。勇気やプライド、激励を意味して軍人達を勇気づけたシンボルとされています。
- 1960年代に入ると、55年に亡くなったジャズ界のサックスフォニストの巨匠、チャーリー・パーカーへ追悼の意を込めて、「Bird Lives」(「Bird」はチャーリー・パーカーのあだ名)のグラフィティがペンシルベニア州はフィラデルフィアの街中で見られるようになりました。
- 1970年代にニューヨークのダウンタウンで始まったとされ、スプレーやフェルトペンなどを用いて壁や電車などに落書きをすることから始まったとされる。
- 70年初頭、グラフィティムーブメントの中心はフィラデルフィアからニューヨークに移り、なかでもマンハッタンの155丁目から上のワシントンハイツと呼ばれる地区やブロンクスをメインに盛りあがりました。TAKI 183やTracy 168、Stay High 149、Dondi、Phase 2など、数多くのライター達が名声を得るためにこぞって地下鉄の電車などに自分の名前を“ボム” して(=描いて)競い合い、それがブルックリンやクイーンズ、ダウンタウンなど他の地域に広がり、色んなスタイルや新しいアイデアが生まれたのです。
- 1980年代には、ダウンタウンの黒人文化とされていたNYのグラフィティが、アッパーミドルの白人文化へ吸収される形で、前衛芸術として認められるようになり、それは映画『ワイルド・スタイル』(1983)や『スタイル・ウォーズ』(1983)などでフィクションを交えながら描かれている。
グラフィティの種類(描き方)
- タグ(tag)
- グラフィティライターの名前やサインのこと。
- グラフィティライターの名前やサインのこと。
- スローアップ(throw-up)
- 2色ほどで書かれ、アウトラインで構成されたもの。
- 2色ほどで書かれ、アウトラインで構成されたもの。
- ブロックバスタ(Block Buster)
- ブロック状の文字で書かれた巨大なグラフィティ。短時間で広範囲に書くことに適しているとされています。
- ブロック状の文字で書かれた巨大なグラフィティ。短時間で広範囲に書くことに適しているとされています。
- ピース(Piece)
- 3色以上使い、タグまで添えられたものなど、完成されたグラフィティ。マスターピースとも言うそうです。
- 3色以上使い、タグまで添えられたものなど、完成されたグラフィティ。マスターピースとも言うそうです。
- ワイルドスタイル(Wild Style)
- 巧妙なスローアップで、複雑に組み合わされたものなので、ライター以外の人も読むことが出来ないものが多いそうです。
- 巧妙なスローアップで、複雑に組み合わされたものなので、ライター以外の人も読むことが出来ないものが多いそうです。
参照リンク
2021.05.06
テーマ案
- ロゴ×塗りつぶす
- 有名ブランドのロゴをグラフィティ風に制作したものを載せるサイトを作る。
- ロゴのデザインの重要性、グラフィティのかっこよさを伝えるため
参考リンク
2021.04.22
テーマ案
- グラフィティ×webサイト
- 自分で好みのグラフィティをカスタマイズできるサイト
- 自分で好みのグラフィティをカスタマイズできるサイト
参考リンク
既存サイト
2021.04.20
テーマ再考
参考リンク
2021.04.16
テーマ案
- 落書き問題×Graphic design&web design
- 福岡市のリーガルウォールを設置した体験型の架空の店のDTPや簡単なwebサイトを展開
- 福岡市のリーガルウォールを設置した体験型の架空の店のDTPや簡単なwebサイトを展開