Yuuto.Y

作品の概要説明

フロントエンド

• HTML
• CSS
• Javascript
• JS(axios)

バックエンド

• Node.js(Express)
• Mongoose

データベース

• MongoDB

デプロイ先

• HEROKU

作品作成時の注力ポイントやエピソード

こちらのTodoアプリは、Udemyの教材で学習しながらアウトプットしたものになります。
今まで、HTML,CSS(sass),Javascript,Wordpress(PHP)など、形としては、WEBサイトなので、しっくりくるようなものが、作れていました。
ただ、Javascript、バックエンドのAPIなどを中心とした動きは、想像がつきづらかったのですが、実際のコードを見ることで、全体的な仕組みを理解できることが、できました。

作品の成果

フロント側とバックエンド側のJavascriptの動きを理解することが、できました。
特にJavascriptは経験が少ないでの、このTodoアプリを作ったことで、色々なコーディングパターンを収集することができました。
これは、僕にとって大きな1歩だと感じました。

作品の概要説明

こちらの作品は、初めて自分でデザインカンプの制作からコーディングまで、一貫して作ったサイトのなります。
・作品のカテゴリー:海外移住の物件紹介サイト
・作品の担当範囲:デザインカンプ制作からwebサイトのーコーディング。
・作品の制作期間:6月上旬~7月の中旬。今後もこのwebサイトはブラッシュアップしていく予定です。
今後の課題
・pcのメニューのホバーの挙動
・spのドロワーメニューの戻る時の挙動の不具合
・サイトの重さを改善する。
・PHPでのお問い合わせフォーム周りのコーディング。
・LOCATIONメニューのカテゴリーの見やすさを改善する。
上記が、今後の課題なのですが、この項目を全て満たすことで、また一歩、レベルの高いwebサイトが表現・制作できるようになるのかなと考えています。
デザインカンプは、下記に添付させていただいております。
※別タブで開けます。
HOME-IN-VIEWデザインカンプXDファイル

作品の見どころ

メインビジュアルから動画を再生しアニメーションを置いて、高級感かつ海外に特化した物件紹介サイトと感じさせるような、イメージのwebサイトが特徴的です。
ドロワーメニューをpc画面からでも表示し、ターゲットを若向けに思って作り、モダン感を感じさせる作りを意識して作りました。
また、海外移住の物件紹介サイトということで、実際に物件先のカテゴリーや移住先情報などをまとめられる用に意識して作りwordpressを使っての制作としました。
作品の見どころ
・ドロワーメニュー,pc,tab,spサイズ。
・pcサイズのメニューのホバーエフェクト
・javascriptの動き、コンタクトのモーダル、Q&Aのアコーディオンメニュー等

作品作成時の注力ポイントやエピソード

初めて、xdでデザインカンプの制作を行えました。とても手数が多くなってしまい、もっと効率的にできればといいなと思いました。
操作もかなり思ったようにうまく行えず、苦労しました。もっと素早く効率的にできるようになりたいなと思いました。
今回は、wordpressを使っての制作でしたが、以前に何度かwordpressを使って制作した経験も活かせ、以前よりは、効率的にwordpressを使っての制作を行えました。
以前よりもクオリティの高いwebサイトを作りたいと考えた為、自主的にjavascriptの勉強をしながらも今回のwebサイトに取り入れられました。
かなり、一つ動かすともう一つが、動かなくなるなど、トラブルが、多発しておりました。調べながら、取り柄れたものもありますので、かなり自己流的になってしまいましたが、取り柄れられたのは、よかったです。
今後は、今回の経験も得て、udemyなどの教材でしっかり勉強して、働きながらでも習得しようと考えました。

作品の成果

・javascriptのコーディング
・xdのデザインカンプの制作
・wordpressのサイト構築
・scssコーディングのレベルアップ
・cssの3dエフェクト等

作品の概要説明

web制作の自由課題練習で、制作しました。 担当範囲は、デザインカンプを提供していただき、コーディングから実装を進めました。 HTML,CSS,Javascript(jQuery)に加えwordpress,PHPでの制作となっています。 制作期間は、5月の初めから中旬くらいまでで、2週間ほどでの制作でした。

作品の見どころ

CSS:transform:skew;backgroundのlinerを使い背景を斜めのデザインができた。 JS:swiperプラグインを使いメインビジュアルのスライダーを作成。 Wordpress:デザインカンプから意図を汲み取り、wordpressのルールに合わせて設計方法を考えて作りました。 具体的には、投稿内容絞り込みなど、テンプレートページを通常にするか、カスタム投稿で作るかなど、

作品作成時の注力ポイントやエピソード

CSSでつまづいたポイントがありました。 背景を斜めにする実装方法やhoverすると矢印が右に伸びるトランジションなど思うようにいかない点がありました。 wordpressでの制作したのは、2回目でしたが、初めてやった実装方法もあり、前回制作した知見を活かしつつも、思ったより時間がかかってしまいた。 コンタクトフォーム7というお問い合わせプラグインなど使ったところでも詰まってしまた経験が得られました。

作品の成果

wordpressで0からテーマを作りコーポレートサイトを作るのは、2回目でしたので、調べて拾ってきたコードなどを理解する時間を制作している途中に当てました。 wordpressのループやサブループ以外時にPHPのforeach文を使うとwordpressの関数と組み合わせがよく、前回wordpressのホームページを作った時よりも綺麗にコード書けました。 まだまだサイトとしては改善がある場所もあると思うので、見つけ次第ブラッシュアップしていこうと思います。

作品の概要説明

こちらの作品は、web制作の自由課題練習として制作させて頂きました。 担当範囲は、デザインカンプは提供して頂き、コーディングから実装しました。 制作期間は、休みの日と平日の2~3時間程度で、1ヶ月近くかかりました。

作品の見どころ

メインビジュアルでswiperというスライダーを採用しており、お店の雰囲気が、伝わってくるのが、特徴です。

作品作成時の注力ポイントやエピソード

制作していて思ったのは、HTMLとCSSのサイトをphpで書き換えたのですが、予想以上にレイアウトが崩れてしまっていて大変でした。 wordpressのテンプレートタグにするとclass名が変わり大体表示が崩れることが、多かったので、wordpress関数をしっかり使えるようになり、 初めの段階からphpでかけるようになろうと思いました。

作品の成果

初めてwordpressとphpを使っての制作でしたので、wordpress全体の流れの知識が大枠身についたのが、達成感がありました。 また、複数ページのちょっと規模があるサイトの制作も初めてでしたので、SCSSのファイル管理の知識が深まったことも同時に成果が得られました。

作品の概要説明

こちらの作品は、web制作の自由練習としてで制作しました。 担当範囲は、デザインカンプは、提供して頂き、HTML CSS jQueryのコーディングから制作しました。 制作につまづいてしまいましたが、制作期間は、9月~から初め3日程度です。 4月の初めにコーディングの中身を修正しました。

作品の見どころ

途中にパララックスで視差効果をつけていたり、アニメーションをシンプルにしていたりなど、 お店に入りたいと思わされるような雰囲気の特徴がとても良いと思います。

作品作成時の注力ポイントやエピソード

こちらのLPは、4月の初めにコードを見直し修正をしたのですが、半年前に自分がコーディングした内容が、なんでこんな書き方になっているのかと思い驚きました。 関係ない無駄なコードを書いてしまっていたり、保守性が悪いこと感じました。

作品の成果

HTMLやCSS jQueryを使いモーダルウインドウやスクロール、ドロワーメニュー、cssのtransitionやanimationを実装できたのが、単純なhtmlやcssのコーディングしか出来なかった時と比べるととても達成感を得られました。

作品の概要説明

こちらの作品は、web制作の自由練習として制作しました。 デザインカンプは、他の方にで提供して頂きました。 制作期間は、平日1~2時間土日の休みを利用し、1週間と少しでした。

作品作成時の注力ポイントやエピソード

cssのレイアウトの際に頭を結構使いました。 はみ出た際に横にスクロールやレスポンシブ化、ドロワーメニューなどが、少しつまづきましたが、とても身になりました。

作品の成果

基本的なHTMLとCSSが実践的に身についてきたのが、嬉しかったです。 実務で使うjQueryは、ドロワーメニューのみですが、実装できました。