久しぶりの更新です。実は昨年の11月末日交通事故に遭い左足と右手を骨折、入院・手術を経て先日まで静養しておりました…。
まだまだ診察とリハビリに通いながらの状態ですが4月に職場に復帰できるぐらいまで回復したので、途切れていた学習習慣も徐々に取り戻して行きたいと思っております。
そんな中先日書店で上記写真の2冊「動くWebデザインアイディア帳」・「ほんの一手間で劇的に変わるHTML&CSSとWebデザイン実践講座」が気になったので購入してみました。この本での学習を元にリハビリして行こうと思います！
1回目で挑戦させてもった「カンプコーディング」が楽しく実践的なコーディング練習を行うことが出来たので2回目の挑戦も行わさせていただきました。1回目同様第三者の方がデザインしたものをコーディングする点は同じです。
ちなみに今回該当サイトのデザインをされたのは、前回とは別の方です。前回の方同様自身のような初学者を対象に様々な情報発信やコーディング練習用のデザインデータを配布されています。現在個人情報を提示できないため一時的にお名前は伏せさせていただいております。
※ドメインを解約したため、現在画像でのみ閲覧可能です。もし閲覧ご希望でしたら当方PCに当時の作成データがございますので、そちらをお送りすることは可能です。
前回同様従来の学習パターンからの変化とより実践的な学習を行うことでスキルアップを目指すことを目的としました。もしお時間がございましたら下記に制作サイトURLを記載しておりますので、ご覧いただけますと幸いです。
制作時期は2020年7月16日～2020年8月16日の30日間うち5日間は第1回の修正作業(実質作業日数19日)、制作所要時間は修正含め概ねの算出となりますが約77時間(5×10+3×9)。制作人数1人。また、Webとは無関係のお仕事を週4日フルタイムで勤務しながらの制作です。
前回の目標であった「IE11」への対応はもちろん、今回は自分なりにですが後に修正等が発生した際分り易くするためサイトの構造を極力簡易化してみました。具体的には…
この他スライドショーのslick、これまでで学んだり実装してきたJavascript(jQuery)も今サイトに組み込み導入改修してみました。また、前回の制作で学んだ画像圧縮による容量の軽減ももちろん実施。途中構造の見直し等で思ったより制作に時間がかかりましたが、結果的に以前と比較してコーディングの精度は上がったと感じております。
先日知人から既に所持している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グリッドでの対応が出来るようになったことは今後活きると感じております。
今回に限ったことではありませんが、ヘッダー特にナビゲーション部分と幅の設定や調整はどうも自分には難しく感じるようでサイト制作の度苦戦しています。今後克服していきたいですね。
上記不明点・未解決箇所だったヘッダー部分非表示の問題と縦中央揃えの問題を試行錯誤の結果解消しました。所要時間約15時間。解決にあたりz-indexの重なり順について、transformやpositionの解除、それらのIE対応について理解を深めることができました。
この度ポートフォリオサイトを制作したので、色彩舎の職業訓練に通っていた2018年以前(主に2015年)の制作物も紹介したいと思います。制作物の中にはサイトもございますが、XHTML時代のものでサーバー上にはあげておりませんので画像のみの紹介となります。
「ゴールドコースト満喫ツアー」というテーマを与えられて制作したバナーです。受け手の方に伝わり易くするため一番訴求したい観光地名と価格の文字サイズを大きくしました。この他写楽人物画アレンジやポストカードを自由にデザインする課題にも挑戦しました。もしよろしければご覧ください。
ナビとメインビジュアルの制作課題で作成。題材が幼稚園サイトになったのは、当時講師の方から「当人にとって興味を持ちにくい対象を敢えて題材にすると今後のために良い経験となる。」というお話を受けたためです。
テーマは高級感のあるサイトで、色は水色とピンク、ロゴは決まったものを使用するという条件付きで作成。ワイヤーフレームからデザインを経てXHTMLでコーディングまで行いました。スマホ対応のコーディングまでは当時行っておりませんでした。
自由にテーマを設定し制作する課題では自身の趣味であるバイクをテーマに扱ったサイトを制作しました。単車に塗装・使用されている色をサイトでも使用し統一感を出すように意識しました。こちらもデザインからコーディングまで行いました。
グループワークで制作。実際にホームページを持ちたい依頼者が来校され、5,6チームが制作したサイトの中から依頼者が気に入った作品のチームを選ぶという形式で進行しました。自分のグループにはデザインの実務経験者が複数人いたこともあり依頼者の方から選出されました。
自身は制作したサイトのメニューページとアクセスページのページ内デザインとコーディングを担当しました。尚、このサイトは現在稼働しておりません。
※ドメインを解約したため、現在画像でのみ閲覧可能です。もし閲覧ご希望でしたら当方PCに当時の作成データがございますので、そちらをお送りすることは可能です。
2019年11下旬～2020年2月初頭の約2ヶ月少しの約70日(構想・企画・レイアウト・コーディング・自己判断修正全て含む)。制作人数1人。制作時間約200時間(おおよそです)。また、webとは無関係のお仕事を週4日フルタイムで勤務しながらの制作。
今回の目的はCSSグリッドでのサイト構築に理解を深めることに重きを置いていたので、題材は自由に設定しました。題材は趣味のゲームのチーム紹介サイトです。
大きな理由としては好きなものを題材にした場合、記事の作成が比較的容易である点、モチベーションの維持にも最適であると感じたためです。画像はネット上に存在するものを自由に使用しました。
自分なりにですがゲームの世界観を大事にしたかったので、ゲーム中で実際使用されている色を使ったり、一部見出し部分のフォントをテキストシャドーなどを用いて真似をして再現してみました。
サイトを制作するにあたり世に出てる様々なサイトを参考にしました。その中でヘッダー部分がスクロールしても付いてくる仕組み・スクロールに応じてフェードインするアニメーションを多数見受けられましたので、当サイトにも組み込んでみました。
左上や中央上にあるチームのロゴはゲーム冒頭でも表示される開発元の会社「SUPERCELL」のロゴをモチーフにして制作致しました。
サイトの目的はチームの活性化です。チームに来られた新人が何に重きを置いたどんなチームなのかを知ってもらう、ルールの確認をしてもらう、また効果的な戦術の提案や他メンバーの情報発信を今後していくことを目的に制作しました。
新技術を身に着けた折にはサイトに反映させていきたいと思っています。今回の制作を通じて今思い浮かぶだけでも下記のようなことを今後勉強していきたいと思いました。
2周目所要時間約1ヶ月。その制作物をこちらでも載せていきたいと思います。今後はこれまで学んだこと、そして今回学んだCSSグリッドを用いてインプットからアウトプットに移行していこうと思います。現在アウトプットに用いるサイトの企画構想中です♪
1周目の学習が終わったので報告。改めてグリッドレイアウトを使いこなせるようになりたいと感じました。これを使いこなせるようになれば各デバイス対応は勿論、デザインの為の文書構造にせずに済み、且つ本書にも記載があった通り非常にシンプルでスマートな文書構造になりSEO的にも相性が良くなりそうです。
ただ1周目を終えた正直な感想としては、理解が浅くまだ扱うには不安が残る状態です。もう1周ほど学習したのち、アウトプットの為のサイトを作成し理解を深めていきたいと思います♪
※ドメインを解約したため、現在画像でのみ閲覧可能です。もし閲覧ご希望でしたら当方PCに当時の作成データがございますので、そちらをお送りすることは可能です。
2018年9月21日～2018年10月19日の約一ヶ月。作業人数1人、作業時間約100時間(企画構想、英会話教室業界の情報収集、デザイン、コーディング含む)。尚、この間就職活動も行っているためあくまで目算となっております。
英会話教室「artoss」のクライアントからサイトリニューアルの依頼を受けたという事を想定し、シングルページのサイトを制作しました。
売上アップ・認知度アップによる集客としました。
30、40代の親御さん。とりわけ子供のお受験を考えている比較的裕福な層の親御さんに設定しました。
ターゲットの設定理由はまず通常の家庭ではそもそもお受験という選択肢はあまり一般的でないため富裕層の親御さんに設定。また受講料も他社よりも比較的高めに設定してある点。
将来グローバル社会で活躍できる人材を育成する英会話教室としました。
コンセプトに関してはページ内の「選ばれる3つの理由」内で述べている「artoss」最大の持ち味である高い有名校輩出率(93%)、定着率(退校率4%)を提示することによりターゲットを納得させる狙いがあります。
ターゲットの世代は仕事や家庭と時間にタイトで忙しい人が多いことを想定したため、シンプル、見易さ、機能性を重視。更に年齢層も決して若くはなく比較的富裕層に設定したため高級感や基本モノトーンで落ち着いたデザインを意識。また、どこでも閲覧できるようにするためマルチデバイス対応も意識。
高級感や落ち着いた雰囲気を出すのに明朝体、中央揃え、余白をしっかり取る、黒色が効果的であるという情報を見聞きしたのでこれらの事を意識してレイアウトをしてみました。
フッターのカラフルな装飾はグローバル社会で活躍できる人材を育成するといったコンセプトに沿い、実際に各国の国旗で使用されている色を幾つか使用しモノトーン調のサイトにアクセントとして取り入れました。
アイコン等を除く画像は今後必ず大きいもの(少なくとも元々1000px以上)を採用したいと感じました。講師紹介部分に使用した画像のタブレット表示の際画像サイズが足りなかったため適切な調整が行えませんでした。今後は使用する画像だけでなくサイズも意識していきます。
スマホやタブレットの通常表示(縦)は特に問題を感じませんでしたが、端末を縦から横に変化した際講義内容・料金の背景画像が足りていなかったり、メインビジュアルが切り替わらない等の不具合を確認。現状の自分で修正できた箇所もありますがマルチデバイス対応の難しさを経験することが出来ました。
また、chromeの検証では問題なく表示されていましたが、サーバー上で各端末(当方iphone6=スマホ,d-tab/d-02H=タブレット,ノートPC,デスクトップPC=1920×1080)にて確認するとそれぞれ違った挙動が発生することも知ることができ今後に活かしていきたいと感じました。
やはり経験勉強不足が原因か余分なコードが多い(特にCSS)と感じているので今後も勉強を継続し少ない時間とスマートなコードを目指していきたいと考えております。もし当サイトをご覧になられた方がいらっしゃればご意見等お待ちしております。
※ドメインを解約したため、現在画像でのみ閲覧可能です。もし閲覧ご希望でしたら当方PCに当時の作成データがございますので、そちらをお送りすることは可能です。
2018年8月8日～2018年9月10日の約一ヶ月。工程としては企画書・ワイヤーフレーム・デザインカンプ・コーディングの作成提出の手順を踏み、担当講師のOKを貰い完成させました。制作人数1人、制作所要時間約170時間(講義時間＋自宅作業含む34日x5hで計算。)
当サイトは約半年の職業訓練の集大成ということで、「ETERNITY」というバイクショップのクライアントからサイトリニューアルの依頼を受けた事を想定し制作しました。また、エンドユーザーが出先であることが多いためスマホ対応も意識しました。
売上アップ・集客・ビッグスクーターの普及としました。
30、40代の男性。とりわけ日々の通勤に対し不満を抱えているビジネスマンをメインターゲットとし、単車に関心のある若者をサブターゲットとして設定しました。
ターゲット設定理由は各メーカーのビッグスクーターのターゲットが通勤に不満を持つビジネスマン(主に渋滞や痛勤電車)に設定されており、また実際に現在利用されているユーザーもその年齢層の方々が多いため。
また単車を好む若者にも普及させたいということで、学生向けモデルの紹介記事、カスタムにおける愉しみを提示し変化を好む若者にも対応しました。
ターゲットにビッグスクーターの利便性やカスタムの愉しさ、長所を紹介し通勤や日々の生活に役立ててもらうためのサイト。
コンセプト設定理由に関しては特徴ページにて記載している「優れた積載収容能力」、「市街地走行における快適利便性」、「コスパ面でのアドバンテージ」の記事で詳しく触れビッグスクーターならではの魅力をターゲットユーザーに伝えていきます。
ターゲットの世代は仕事や家庭と時間にタイトで忙しい人が多いことを想定したため、シンプル、見易さ、機能性を重視。また、ユーザーが急な事故や故障といったトラブルに見舞われた時直ぐに連絡が取れ、どこでも閲覧できるようにするためスマホ対応も意識しました。
ロゴの意図として「ETERNITY」とは「永遠」という意味がある点を考慮し、「無限のマーク」や「メビウスの輪」をモチーフに制作しました。またバイクを通じてお店と顧客のより一層の発展を願って右肩上がりのデザインにしました。
更にターゲットである男性に対し視認性に優れる他、「面白い」「楽しい」「親近感がある」「目立つ」「男性的」なイメージを持ってもらうため、ロゴだけでなくフォントにもゴシック体を用いました。
jQueryに対する知識が浅いため、BXスライダーを使いこなせませんでした。今後はまずHTMLとCSSの基本を抑え、jQueryに対する理解も深めていきたいと感じました。また、Chrome以外のブラウザ確認をしていなかったので、今後は別ブラウザでの表示も意識していきたいと感じました。
勉強のため購入。
駆け出しの自分には難しい内容ですが、これを身に付けることができればデバイス対応は勿論、レイアウトの自由度が増し文書構造もシンプルなものになります。
自分も現役バリバリの知人に勧められましたが、CSSの参考書をお探しの方にもおススメです。現在制作中のサイトが仕上がり次第また勉強する予定です！