Atsu Portfolio

制作の背景

1回目で挑戦させてもった「カンプコーディング」が楽しく実践的なコーディング練習を行うことが出来たので2回目の挑戦も行わさせていただきました。1回目同様第三者の方がデザインしたものをコーディングする点は同じです。

ちなみに今回該当サイトのデザインをされたのは、前回とは別の方です。前回の方同様自身のような初学者を対象に様々な情報発信やコーディング練習用のデザインデータを配布されています。現在個人情報を提示できないため一時的にお名前は伏せさせていただいております。

※ドメインを解約したため、現在画像でのみ閲覧可能です。もし閲覧ご希望でしたら当方PCに当時の作成データがございますので、そちらをお送りすることは可能です。

制作の目的

前回同様従来の学習パターンからの変化とより実践的な学習を行うことでスキルアップを目指すことを目的としました。もしお時間がございましたら下記に制作サイトURLを記載しておりますので、ご覧いただけますと幸いです。

制作期間概要

制作時期は2020年7月16日～2020年8月16日の30日間うち5日間は第1回の修正作業(実質作業日数19日)、制作所要時間は修正含め概ねの算出となりますが約77時間(5×10+3×9)。制作人数1人。また、Webとは無関係のお仕事を週4日フルタイムで勤務しながらの制作です。

意識した点

前回の目標であった「IE11」への対応はもちろん、今回は自分なりにですが後に修正等が発生した際分り易くするためサイトの構造を極力簡易化してみました。具体的には…

• 一目で何処の部分か把握できるクラス名を考え命名
• 意匠が被る箇所は極力クラスで共有
• CSSファイルの住分け(例：レイアウト専用、テキスト専用、ブラウザ専用といった具合です)

この他スライドショーのslick、これまでで学んだり実装してきたJavascript(jQuery)も今サイトに組み込み導入改修してみました。また、前回の制作で学んだ画像圧縮による容量の軽減ももちろん実施。途中構造の見直し等で思ったより制作に時間がかかりましたが、結果的に以前と比較してコーディングの精度は上がったと感じております。

学んだ事

• jQuery及びJavaScriptの実装
  (主にslickと過去実装してきたものの改修と導入)
• 各ブラウザ対応(特にIE11対応の精度UP)
• サイト構造の簡易化(過去と比較して)
• コーディング精度の向上(Markup Validation Serviceでのエラー0達成)。このサイトでのバリデーションチェックは該当サイトのデザイナー様からご教授・ご指摘いただけました。

今後の目標

先日知人から既に所持しているWordPressサイトの新規オリジナルテーマの制作をしないかというお声をいただきました。これを機にまだ知識の浅いWordPressへの理解を深めたいですね。また、現在学習の最大目標である実務に就くための活動もそろそろ並行して始めていければと考えております。

制作の背景

ご存知の方もたくさんいらっしゃるかと思いますが「カンプコーディング」とは第三者の方がデザインしたものをコーディングすること。自身もtwitterを介して教わり知ることが出来ました。実は以前からこの手の学習方法である「模写コーディング」に興味を持っていた背景もあり、この度挑戦させていただきました。

尚、この「カンプコーディング」の存在を教えてくれた方であり該当サイトのデザインをされたのは、プロのWebデザイナーさんでご自身のお仕事は勿論、自分のようなWeb制作初学者へのコーチングも精力的に行われています。現在個人情報を提示できないため一時的にお名前は伏せさせていただいております。

※ドメインを解約したため、現在画像でのみ閲覧可能です。もし閲覧ご希望でしたら当方PCに当時の作成データがございますので、そちらをお送りすることは可能です。

制作の目的

従来の学習パターンからの変化とより実践的な学習を行うことでスキルアップを目指すことを目的としました。これまでは教本にて学習ののちアウトプットを行うというスタンスでしたが、上記のような背景もありより実践的な学習方法への模索がきっかけです。ちなみに前回の記事であるJsの教本は途中です。

制作期間概要

制作時期は2020年6月18日～2020年7月6日の19日間(作業日数14日)、制作所要時間は概ね約70時間(制作5×10+修正5×4)。制作人数1人。また、Webとは無関係のお仕事を週4日フルタイムで勤務しながらの制作です。

意識した点

「chrome・firefox・edge」だけでなく、これまで見送ってきた「IE11」への初対応を意識してみました。時間を要した上完全ではありませんがこれまでの制作物では大きくレイアウト崩れを起こしていたことを考えると収穫はあったと考えております。特にCSSグリッドでの対応が出来るようになったことは今後活きると感じております。

学んだ事

• jQuery及びJavaScriptの実装
  (主にハンバーガーメニュー・フェードインアニメーション・スムーススクロール)
• 各ブラウザ対応(特にIE11対応のベンダープレフィックス)
• imgとbackgroundの使い分けについて
• 画像圧縮による容量の軽減
• 第三者からの指摘により自身では気が付かないことに気が付けたこと
• XD(デザインカンプ)に初めて触れたこと

不明点・未解決箇所

• タブレットとスマホのメニュー表示時のヘッダー部分非表示
• 同じくメニューの内容物の縦中央揃え(paddingでそれらしく調整はしました)
• 幅の設定にやや不安(特にIE11)

今回に限ったことではありませんが、ヘッダー特にナビゲーション部分と幅の設定や調整はどうも自分には難しく感じるようでサイト制作の度苦戦しています。今後克服していきたいですね。

修正追記(2020/7/26)

上記不明点・未解決箇所だったヘッダー部分非表示の問題と縦中央揃えの問題を試行錯誤の結果解消しました。所要時間約15時間。解決にあたりz-indexの重なり順について、transformやpositionの解除、それらのIE対応について理解を深めることができました。

制作サイト情報

※ドメインを解約したため、現在画像でのみ閲覧可能です。もし閲覧ご希望でしたら当方PCに当時の作成データがございますので、そちらをお送りすることは可能です。

制作時期・期間

2019年11下旬～2020年2月初頭の約2ヶ月少しの約70日(構想・企画・レイアウト・コーディング・自己判断修正全て含む)。制作人数1人。制作時間約200時間(おおよそです)。また、webとは無関係のお仕事を週4日フルタイムで勤務しながらの制作。

制作サイト概要

今回の目的はCSSグリッドでのサイト構築に理解を深めることに重きを置いていたので、題材は自由に設定しました。題材は趣味のゲームのチーム紹介サイトです。

大きな理由としては好きなものを題材にした場合、記事の作成が比較的容易である点、モチベーションの維持にも最適であると感じたためです。画像はネット上に存在するものを自由に使用しました。

意識した点

自分なりにですがゲームの世界観を大事にしたかったので、ゲーム中で実際使用されている色を使ったり、一部見出し部分のフォントをテキストシャドーなどを用いて真似をして再現してみました。

サイトを制作するにあたり世に出てる様々なサイトを参考にしました。その中でヘッダー部分がスクロールしても付いてくる仕組み・スクロールに応じてフェードインするアニメーションを多数見受けられましたので、当サイトにも組み込んでみました。

左上や中央上にあるチームのロゴはゲーム冒頭でも表示される開発元の会社「SUPERCELL」のロゴをモチーフにして制作致しました。

サイトの目的はチームの活性化です。チームに来られた新人が何に重きを置いたどんなチームなのかを知ってもらう、ルールの確認をしてもらう、また効果的な戦術の提案や他メンバーの情報発信を今後していくことを目的に制作しました。

参考・参照サイト

• Supercell(開発元のゲーム制作会社)
• muuuuu.org(参考用のギャラリーサイト)

今後の目標

新技術を身に着けた折にはサイトに反映させていきたいと思っています。今回の制作を通じて今思い浮かぶだけでも下記のようなことを今後勉強していきたいと思いました。

• jQueryやJavascriptの知識(動的なサイトを構築するため)。
• PHPの知識(主にお問合せフォーム実装のため)。
• WordPressの知識(公開されているサイト1/3が該当するため)。

制作サイト情報

※ドメインを解約したため、現在画像でのみ閲覧可能です。もし閲覧ご希望でしたら当方PCに当時の作成データがございますので、そちらをお送りすることは可能です。

制作時期・期間

2018年9月21日～2018年10月19日の約一ヶ月。作業人数1人、作業時間約100時間(企画構想、英会話教室業界の情報収集、デザイン、コーディング含む)。尚、この間就職活動も行っているためあくまで目算となっております。

制作サイト概要

英会話教室「artoss」のクライアントからサイトリニューアルの依頼を受けたという事を想定し、シングルページのサイトを制作しました。

サイトの目的

売上アップ・認知度アップによる集客としました。

ターゲット

30、40代の親御さん。とりわけ子供のお受験を考えている比較的裕福な層の親御さんに設定しました。
ターゲットの設定理由はまず通常の家庭ではそもそもお受験という選択肢はあまり一般的でないため富裕層の親御さんに設定。また受講料も他社よりも比較的高めに設定してある点。

コンセプト

将来グローバル社会で活躍できる人材を育成する英会話教室としました。
コンセプトに関してはページ内の「選ばれる3つの理由」内で述べている「artoss」最大の持ち味である高い有名校輩出率(93%)、定着率(退校率4%)を提示することによりターゲットを納得させる狙いがあります。

意識した点

ターゲットの世代は仕事や家庭と時間にタイトで忙しい人が多いことを想定したため、シンプル、見易さ、機能性を重視。更に年齢層も決して若くはなく比較的富裕層に設定したため高級感や基本モノトーンで落ち着いたデザインを意識。また、どこでも閲覧できるようにするためマルチデバイス対応も意識。

高級感や落ち着いた雰囲気を出すのに明朝体、中央揃え、余白をしっかり取る、黒色が効果的であるという情報を見聞きしたのでこれらの事を意識してレイアウトをしてみました。

フッターのカラフルな装飾はグローバル社会で活躍できる人材を育成するといったコンセプトに沿い、実際に各国の国旗で使用されている色を幾つか使用しモノトーン調のサイトにアクセントとして取り入れました。

参考・参照サイト

• シェーン英会話教室
• トライズ英会話教室
• ENGLISHCOMPANY
• その他各英会話教室のサイト

今後の目標

アイコン等を除く画像は今後必ず大きいもの(少なくとも元々1000px以上)を採用したいと感じました。講師紹介部分に使用した画像のタブレット表示の際画像サイズが足りなかったため適切な調整が行えませんでした。今後は使用する画像だけでなくサイズも意識していきます。

スマホやタブレットの通常表示(縦)は特に問題を感じませんでしたが、端末を縦から横に変化した際講義内容・料金の背景画像が足りていなかったり、メインビジュアルが切り替わらない等の不具合を確認。現状の自分で修正できた箇所もありますがマルチデバイス対応の難しさを経験することが出来ました。

また、chromeの検証では問題なく表示されていましたが、サーバー上で各端末(当方iphone6=スマホ,d-tab/d-02H=タブレット,ノートPC,デスクトップPC=1920×1080)にて確認するとそれぞれ違った挙動が発生することも知ることができ今後に活かしていきたいと感じました。

やはり経験勉強不足が原因か余分なコードが多い(特にCSS)と感じているので今後も勉強を継続し少ない時間とスマートなコードを目指していきたいと考えております。もし当サイトをご覧になられた方がいらっしゃればご意見等お待ちしております。

サイトURL

※ドメインを解約したため、現在画像でのみ閲覧可能です。もし閲覧ご希望でしたら当方PCに当時の作成データがございますので、そちらをお送りすることは可能です。

制作時期・期間

2018年8月8日～2018年9月10日の約一ヶ月。工程としては企画書・ワイヤーフレーム・デザインカンプ・コーディングの作成提出の手順を踏み、担当講師のOKを貰い完成させました。制作人数1人、制作所要時間約170時間(講義時間＋自宅作業含む34日x5hで計算。)

制作サイト概要

当サイトは約半年の職業訓練の集大成ということで、「ETERNITY」というバイクショップのクライアントからサイトリニューアルの依頼を受けた事を想定し制作しました。また、エンドユーザーが出先であることが多いためスマホ対応も意識しました。

サイトの目的

売上アップ・集客・ビッグスクーターの普及としました。

ターゲット

30、40代の男性。とりわけ日々の通勤に対し不満を抱えているビジネスマンをメインターゲットとし、単車に関心のある若者をサブターゲットとして設定しました。

ターゲット設定理由は各メーカーのビッグスクーターのターゲットが通勤に不満を持つビジネスマン(主に渋滞や痛勤電車)に設定されており、また実際に現在利用されているユーザーもその年齢層の方々が多いため。

また単車を好む若者にも普及させたいということで、学生向けモデルの紹介記事、カスタムにおける愉しみを提示し変化を好む若者にも対応しました。

コンセプト

ターゲットにビッグスクーターの利便性やカスタムの愉しさ、長所を紹介し通勤や日々の生活に役立ててもらうためのサイト。

コンセプト設定理由に関しては特徴ページにて記載している「優れた積載収容能力」、「市街地走行における快適利便性」、「コスパ面でのアドバンテージ」の記事で詳しく触れビッグスクーターならではの魅力をターゲットユーザーに伝えていきます。

意識した点

ターゲットの世代は仕事や家庭と時間にタイトで忙しい人が多いことを想定したため、シンプル、見易さ、機能性を重視。また、ユーザーが急な事故や故障といったトラブルに見舞われた時直ぐに連絡が取れ、どこでも閲覧できるようにするためスマホ対応も意識しました。

ロゴの意図として「ETERNITY」とは「永遠」という意味がある点を考慮し、「無限のマーク」や「メビウスの輪」をモチーフに制作しました。またバイクを通じてお店と顧客のより一層の発展を願って右肩上がりのデザインにしました。

更にターゲットである男性に対し視認性に優れる他、「面白い」「楽しい」「親近感がある」「目立つ」「男性的」なイメージを持ってもらうため、ロゴだけでなくフォントにもゴシック体を用いました。

使用カラー

無彩色(ベースカラー)

ターゲットの世代のような穏やかで落ち着いた印象を与えます。

赤系統色(アクセントカラー)

誘目性が高く、購買意欲を高める効果も実証されています。

白色(背景色)

見易さ重視。真新しさを与えるのにも効果的です。

参考・参照サイト

• TOYOTA自動車WEBサイト
• HONDA技研サイト(バイク)
• YAMAHA発動機サイト
• SUZUKI二輪車サイト
• その他バイク専門店等

今後の目標

jQueryに対する知識が浅いため、BXスライダーを使いこなせませんでした。今後はまずHTMLとCSSの基本を抑え、jQueryに対する理解も深めていきたいと感じました。また、Chrome以外のブラウザ確認をしていなかったので、今後は別ブラウザでの表示も意識していきたいと感じました。