LogoMark.png

長岡茉理奈/情報デザイン研究II

Photoframe

写真にフレームをつけるサイト


main.jpeg



概要

これは何?

好きな写真やイラストなどにフレームをつけたりデコレーションすることのできるサイト

背景と目的

SNSが普及してInstagramやTwitterを利用して、写真など情報の共有をすることが当たり前になりました。写真を撮ってSNSなどにあげる際、なんだかこのままでは味気ないなと感じることがあり、
簡単にデコレーションができるようなサイトがあれば便利で使いやすいと考えたから。

コンセプト

フレームを気軽に使える。

成果物の仕様

Webサイト

https://marina-nagaoka1.github.io/photo_9/



制作ツール


プロジェクトの期間

3年後期


まとめ




調査

現状調査

SNSが普及して当たり前の存在になった現代、InstagramやTwitterなどで情報を発信することが手軽にできるものとなった。
SNSでは画像を拡散するために、編集して投稿するのだが、現状画像編集して、フレームをつけることが出来るものはアプリをインストールして使用するものが多い。

先行事例

技法・技術情報

https://blog.ver001.com/javascript_preview_canvas/

https://qiita.com/No_LINE/items/d3a9dada9f98a7819693

https://blog.katsubemakito.net/html5/canvas-concat




プロジェクト管理

スケジュール


ToDo





進捗記録




2021.12.15

https://marina-nagaoka1.github.io/photo_9/

2021.12.08

試作

https://marina-nagaoka1.github.io/photo_7/

2021.12.01

https://marina-nagaoka1.github.io/btn_sample_3/

https://marina-nagaoka1.github.io/photo_6/

2021.11.24

試作

ボタンに画像を入れたサンプル
https://marina-nagaoka1.github.io/btn_sample_2/
応用してcanvas上に画像を表示できるようにする


2021.11.17

試作

onclickを使ってボタンをクリックすると
画像が切り替わるようにしたサンプル
https://marina-nagaoka1.github.io/btn_sample_1/


2021.11.10

試作

https://marina-nagaoka1.github.io/photo_5/

canvasに選択した写真を描写する事ができた。
フレームのonloadの実行が上手くいかず、ボタンに画像が表示されない、押してもcanvasにフレームが描写されない点を改善させていく。


https://marina-nagaoka1.github.io/photo_4/

https://marina-nagaoka1.github.io/photo_3/

2021.10.27

試作

https://marina-nagaoka1.github.io/photo_2/
JavaScriptのFileAPIで画像のプレビューを表示し、
canvasに描写させることによって画像加工を可能にした。
選択した画像を実際に表示することに時間がかかりすぎて、
デザインまで手が回らなかった。
今後はcssのデザインと、フレームを選べるようにして並べていくことが課題。

2021.10.20

試作

フレーム案の作成

2021.10.13

試作

https://marina-nagaoka1.github.io/photo_1/
dropzoneを使ってファイルを選択できるようにした。

2021.10.06

調査


企画の方向性

2021.09.22

概要

2021.09.15

概要







PAGES

GUIDE

添付ファイル: filemain.jpeg 25件 [詳細] fileline_sample.jpg 31件 [詳細]
Last-modified: 2021-12-15 (水) 14:34:52