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)と感じているので今後も勉強を継続し少ない時間とスマートなコードを目指していきたいと考えております。もし当サイトをご覧になられた方がいらっしゃればご意見等お待ちしております。