About

△▽△▽ モエ△▽△▽ 萌

生年月日
1990年1月3日
出身地
○○県○○○町
希望職種
WEBデザイナー

生まれ

○○山の裾野が広がる高原の小さな町で、陶芸を営む両親の元、双子の兄と一緒に手仕事や手づくりが生み出す温かみを全身で感じながら育つ。

少女時代

中学校在籍時パソコン操作が楽しく、タッチタイピングを習得。
工作機やパソコンの操作が好きになり、○○高専へ進学。

高専時代

機械工学科に在籍し、旋盤や鋳造、溶接を学ぶ傍ら、簡単なHTMLやC言語を学ぶ。

大学時代

手仕事や手づくりに対する想いを覚え、高専卒業後は○○大学へ編入学し、インテリア・グラフィック・プロダクトデザインを学ぶ。

プリンター時代

大学卒業と共に○○県へ戻り、業務用大型プリンター製造販売会社にてPR・広報の業務に就く。
Illustrator・Photoshop・Premiere Pro等のソフトウェアを使い、販促資料やプリントサンプル制作、ハウツー動画の撮影・編集を担当。

工務店時代

地域密着型工務店へ転職後、前職の経験を活かし広報業務を行う。
カタログやチラシ制作、フリーペーパー投稿用記事の編集、住宅の写真撮影など幅広く担当。

現在

PR・広報業務を通してWeb知識や技術の重要性を実感し、フェリカテクニカルアカデミーへ入校。

未来

技術やトレンドに追いつき、先行した企画や提案を行い、コーディングも得意なWebデザイナーを目指す。

Client Work

サイトをみる

Introduction

WEBサイト制作の勉強を始め約３ヶ月目に自らクライアントを見つけ、実際にWEBサイトを制作し、デザイン、コーディングからSEO対策までの全行程を担当。

制作期間１ヶ月

全体構成
２週間
デザイン
１週間
コーディング
１週間

担当工程全行程

  • 顧客折衝
  • デザイン
  • コーディング

ページ規模５頁

  1. ホーム
  2. 選べる家
  3. ラインナップ
  4. 暮らし紹介
  5. お問合せ

当初、クライアントの意志や方向性を引き出すことに苦労したが、サイト制作において最も重要事項だと実感。
具体的なデザインカンプを提示することで、サイトの仕上がりとクライアントのイメージが繋がり、本格的な打合せに着手できた。
クライアントから提示された簡単な内容からデザインカンプやコンテンツの内容をまとめなければならないので、始動する前にイメージサイトやクライアントの事業内容を徹底的に把握し、デザインカンプまでの道のりを可能な限り短縮するように意識したい。

Schedule

当初の予定には無かった、使用画像の選定やテキスト抽出を対応することとなり、デザインカンプの作成が遅れてしまった。
しかし、納期から逆算したスケジュールを元に進捗の管理を目視で行えたため、大幅なズレが生じること無く制作を進めることが出来た。
ガントチャートとは別にプロジェクト管理ツール「Jooto」を使用し、更新や進捗状況の確認をいつでも行えるようにしたことで、より効率が高まったように感じる。

Sitemap

階層を少なくし、サイトを訪れた方全員に全体を把握していただけるようにする。

Wire frame

紹介対象が「家」「家具」「庭」と大きいものであるため、写真を大きく配置。
実際に足を運んでいただくよう、イベント誘致が必須。
全ページの下部へイベントバナーを設置し、アピール。
情報発信としてSNSを高頻度で更新されているため、全ページのヘッダーとページ下部へ配置し、アピール。

Design plan

ワイヤーフレームからデザイン案の作成に取り掛かると、不具合のある箇所や訴求点の曖昧さが分かり、再検討を行う。
小さな修正であっても都度クライアントと連絡を取り合うことで、短時間で修正を終えることができた。

Coding point

定期的にWorld Wide Web ConsortiumやHTML5 Outlinerを確認し、正しい文書構造を意識したコーディングを心掛けた。
サイト全体で文章や写真を多く使用しているので、CSS3やjQueryのアニメーションを実装。
メディアクエリ記述でレスポンシブウェブデザインを作成し、タブレットやスマートフォンに対応。
ブレークポイント960px、768px、651px

See the Pen GQoaee by △▽△▽moe (@moetas) on CodePen.

See the Pen MQKMYm by △▽△▽moe (@moetas) on CodePen.

See the Pen NXQxea by △▽△▽moe (@moetas) on CodePen.

Tasks

Test my siteにてモバイルフレンドリーテストの確認を行う。
サイズの大きい写真を多く配置しているため、読み込み速度の改善が必要。
コードの見直しや写真のリサイズで対処を検討中。
検索における上位表示は、「東村山」「a-plan」のキーワードで検索結果が１位となった。
「a-plan」を知らない人の検索結果に上位表示するよう、他社サイトの調査を踏まえ文章の修正を行いたい。
（2018年1月現在）

Responsive

コンテンツの高さを100vhで指定する際は、各デバイスで見栄えや配置位置に大きなズレが生じる場合があるので注意が必要。
WindowsとMacではフォントやフォントサイズの違いにより印象が変わってしまうため、font-familyを丁寧に指定するようにしたい。
「Blisk」などのブラウザを上手に利用し、手直しの時間を短縮するように意識する。

Photoshopを使用し、キービジュアル画像やアイコン、ロゴ作成全体を通して統一感が現れるよう、使用画像の色合いを揃えるPC→タブレットはフルードグリッドにて対応、767px以下でfloatを解除

サイトをみる

奥行きを表現するため、background-attachmentを使用グローバルナビゲーションにページ内リンクを設定メニューのホバーイベントへアニメーションを実装959px以下でホバーアニメーションを解除

サイトをみる

ロゴやアイコンを作成dl部分へイラストを配置し、他のサイトと異なるレイアウトに挑戦PC→タブレットはフルードグリッドにて対応、767px以下でコンテンツのfloatを解除

サイトをみる

Illustratorを使用し、背景画像をsvgで作成メニューのホバーイベントへ、CSS3アニメーションのscaleを使用959px以下でサイドバーをfloatさせ、649px以下でコンテンツのfloatを解除

サイトをみる

background-clipで背景画像をテキストで切り抜き、CSS3アニメーションでテキストをローテーションさせるdisplay:flexを使用959px以下でナビゲーションを修正、649px以下でコンテンツのflexを解除

サイトをみる

Photoshopを使用し、キービジュアル画像やアイコン、ロゴ作成アクセントカラーにはメインカラーの補色を使い、色合いに合わせて可視性を重視した767px以下でコンテンツのfloatを解除、649px以下でコンテンツ内の画像のfloatを解除

サイトをみる

background-attachmentを使用if文を利用したjQueryを実装メニューのホバーイベントへアニメーションを実装950px以下でホバーアニメーションを解除、767px以下でflexレイアウトを調整

サイトをみる

メニューのホバーイベントへ、CSS3アニメーションのscaleを使用display:flexを使用PC→タブレットはフルード、flex-wrapにて対応、767px以下で１カラムへ変更

サイトをみる

SVGアニメーションを配置画像の高さをvhで指定し、モニターサイズの違いによるレイアウト崩れを防止767px以下でfloatとhoverアクションを解除

サイトをみる

Photoshopを使用し、キービジュアル画像を作成キービジュアルに合わせて画像の色合いを統一HTML5のセクション要素にてマークアップPC→タブレットはフルードグリッドにて対応、767px以下で１カラムへ変更

サイトをみる

Photoshopを使用し、キービジュアル画像を作成プラグイン「Cycle Plugin」でスライドHTML5のセクション要素にてマークアップPC→タブレットはフルードグリッドにて対応、650px以下で３カラムから１カラムへ変更

サイトをみる

グリッドレイアウトを行い、float時における間隔の扱い方法を学ぶ959px以下で３カラムから２カラム、639px以下で２カラムから１カラムへ変更

サイトをみる

Photoshopを使用し、キービジュアル画像やアイコンを作成PC→タブレットはフルードグリッドにて対応、650px以下でfloatを解除全７ページのコーディングを行い、サイト構成の仕組みを学ぶ「イタリア料理とは」ページを初めてレイアウトから構想し、見栄えの良さが必ずしも可視性や操作性には繋がらないことを実感

サイトをみる

jQueryプラグインで、ウィンドウ幅に合わせて可変する全画面スライドを実装639px以下でグローバルナビゲーションを、キービジュアルの下に移動639px以下で、ギャラリー箇所のfloatを解除class属性を使用し、PCサイトとSPサイトの表示／非表示を区別

サイトをみる

Photoshopを使用し、スクリーンショット画像から素材をスライス、書き出し959px以下でコンテンツのfloatを解除、619px以下でコンテンツ内の一部をfloat解除、455px以下で最小画像以外を１カラムへ変更

サイトをみる

Word Press

WP独自のclass名やid名があるため、一つずつ確認し丁寧なコーディングを行う。
ヘッダーやサイドバーなど分割してphpファイルを作成するため、各コンテンツをボックスと捉えたレイアウトを意識する。
WP化することを念頭に置いた上でHTML、CSSファイルを作成する。
WEBサイト制作の初心者であるため、複雑なレイアウトやWP化を踏まえずに進めてしまうと、ファイルの書き換えに非常に時間が掛かってしまう。
2．クライアントワークではWP化を予測せずに制作してしまっていたので、複雑なコードになってしまった。
サイト制作時は、先を見越した計画を心掛けたい。

ブログページのレイアウトから構想を始め、html、cssファイルを作成し、WPへ移行front-page.phpファイルを作成し、トップページ用のファイルを個別に設置ナビゲーションへホバーアニメーションを実装

サイトをみる

ブログサイトはメニューやウィジェットなどリピートするレイアウトが多く、XDのリピートグリッド機能が非常に便利だと実感。
ブログサイト以外でも、テーブル要素のデザインカンプなどで積極的に使用したい。

テキストに沿ってマイテーマを作成テンプレートタグの基本を理解ページテンプレートを利用し、ヘッダーやサイドバー部分を分割テストサーバー（localhost）で作成したデータを実サーバーへデプロイ

サイトをみる

htmlファイルをphpファイルへ変換し、ソース内のurlをテンプレートタグから参照するように変更固定ページの作成により、記事以外のページをトップに設定

サイトをみる