INOUE RENA
井上 怜奈 Inoue Rena
12月中旬から職業訓練校と個人で作成していたサイトおよびバナーを一覧にしたサイトです。
PDF版のポートフォリオです。(GoogleDriveに共有しておりますので、RenaInoue.pdfというファイルをごらんください)
- 可能技術
- ・HTML、CSSと簡単なJSとjQueryでのプラグイン実装。※現時点で学んだ知識量に寄ります。
- ・Illustrator、photoshop を使った画像加工。
- ・slack、zoomを使ったインターンも経験。sassも経験しました。
- 使用テキストエディタ
- ブラケッツ、ATOM、VScord、DreamWeaver主に使っているのはVScordです。
COVID-19 DINER
レトロな雰囲気とポップなミントグリーンでまとめた架空サイト。背景に補色であるマゼンタのグラデーションをかけてより色味が強いサイトになった。
ネーミングに関しては昨今騒がせた例のウイルスの名前をつけた。
不謹慎であるかもしれないが、ウイルスを忘れないようにという自戒の意味もある。
データ
- 課題内容
- デザインカンプからHTMLとCSSを書き起こしオリジナルサイトを作成する
- 実装した内容と言語
- HTML,CSS,jQuery
- Plugin
- bxslider
- lightbox
- ドロワーメニュー
HERODINER
アメリカ風のダイナーをイメージしたサイト。
元気な様子を見せたかったので彩度の高い赤を基調に配色した。またJSのプラグインだけでなく、YOUTUBEやGooleformを使った外部データの埋め込みを実装したサイト。
データ
- 課題内容
- デザインカンプからHTMLとCSSを書き起こしオリジナルサイトを作成する
- 実装した内容と言語
- HTML,CSS,jQuery
- Plugin
- bxslider
- lightbox
- GoogleForm
- SNSとYouTubeの表示
underthesea
タイトルにあるように海をモチーフにしたサイト。
作者の目標では右側の波の写真をGIFアニメ等で実装したかったが使える素材が見つからず断念さした。またスプリッドレイアウトな為、右側のコンテンツ領域が狭い。なのでギャラリーには不向きのの可能性もある。
データ
- 課題内容
- デザインカンプからHTMLとCSSを書き起こしオリジナルサイトを作成する
- 実装した内容と言語
- HTML,CSS,jQuery
- Plugin
- bxslider
- lightbox
- GoogleForm
- SNSとYouTubeの表示
THAI NAMA
初期の作品で、架空のタイ料理屋のサイト。もともとデザインカンプは用意されておりある程度の固定値はしてされている。だが細かいレイアウトなどは作者が調整したものである。
データ
- 課題内容
- デザインカンプ通りに制作する
- 実装した内容と言語
- HTML,CSS,jQuery
- 配布されたデザインカンプについて
- 画像データではなく紙での配布だったので細かいレイアウトが合わない部分があった。
ikebukurocafe
こちらも比較的初期の方のサイト。カフェをイメージしたが、グレーとサーモンピンクを基調に配色。カフェということもあり、暖色系より寒色を多く配置した。
データ
- 課題内容
- デザインカンプからHTMLとCSSを書き起こしオリジナルサイトを作成する
- 実装した内容と言語
- HTML,CSS,jQuery
趣味のイラスト
マウスでのペンツールで作成しました。拙い部分がありますがこの制作でペンツールの腕前は上がったと思います。
データ
- 課題内容
- デザイン作成ソフトに慣れる。
- 実装した内容と言語
- Photoshop、Illustrator
クライアントワーク|デザインカンプ
クライアントのポートフォリオサイトのデザインカンプ。作品の魅力を紹介することも重要だが、クライアントが何をしている人物なのかを伝えることを目的にした。
データ
- 課題内容
- デザインカンプからHTMLとCSSを書き起こしオリジナルサイトを作成する
- 実装した内容と言語
- HTML,CSS,jQuery
- Plugin
- bxslider
- lightbox
- GoogleForm
季節のサイト|架空サイト
基本的なメニューのサイト。画像の大きさについて学びました。
データ
- 課題内容
- メディアクエリを理解する
- 実装した内容と言語
- HTML,CSS
- 初期の頃の作品。メディアクエリで媒体ごとのデザインについて学びました。