Yuuto.Y

作品の概要説明

こちらの作品は、初めて自分でデザインカンプの制作からコーディングまで、一貫して作ったサイトのなります。
・作品のカテゴリー:海外移住の物件紹介サイト
・作品の担当範囲:デザインカンプ制作から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のファイル管理の知識が深まったことも同時に成果が得られました。