about
液晶ガラス・光学ガラスの製造加工会社で約20年間の会社員生活をしてきました。
その間、インフルエンザにかかってしまった以外は一日も仕事を休むことが無く勤めてきました。しかし、持病の腰痛が悪化して歩くことも困難になってしまったので治療に専念することになり退社。
その後の長い治療期間中にプログラミングに興味が湧きExcelVBA・HTML・CSS・javaScriptを独学しました。
腰の状態も良くなり第二のスタートとしてwebデザイナー養成の職業訓練校に入校。Illustrator・Phtoshop・xd・WordPressも学びました。
現在は温度センサーの製造加工の会社で働きながらプログラミングの勉強を続けています。
最近ではいろいろなAIが出てきているのでそれらの勉強もはじめようと考えています。
今までの仕事で、0.1mmの小さな誤差を調整して製品を作っていたこともあり、レイアウトのずれなどが人一倍気になるところがあるのでデザイン面で良い方向に活かせればと思います。
works
小江戸・川越の観光地にある老舗のパン屋が、季節限定の「さつまいものぱん」を宣伝するためのバナーという設定です。
メインのテキスト部分は太字の主張の強いフォントにしたかったのですが店のイメージが地元のパン屋さんという設定なので、家庭感がでるように手書き風のフォントで統一しました。
その分、背景画像と他のオブジェクトとの色合いの差を意識しました。目立つようにさつまいもをイメージする紫色とその中のスペースの割合とカーニングで、細目のフォントでも目立つようにするバランスをとるのに苦労しました。
Illustrator・Photoshop
上の画像を周波数分離にてメガネのレンズ部分の反射を除去修正しました。
メガネの鼻当て部分と肌の境目の立体感が出せずに難しかったです。肌の修正部分が広いとどうしてもべた塗り感がでてしまい、もっと練習が必要だと実感しています。
素の画像のテクスチャーをそのまま使うと、鼻当てから右目頭までの距離が長く違和感が出てしまったので若干歪み補正で目幅を広くしました。下の画像はレンズの中だけに高周波のレイヤーを2枚重ねにしてメリハリが出るようにしました。
photoshop
上の画像を周波数分離にて影を除去修正しました。
影の部分も多く、素の画像のメイクがけっこう白かったので肌の色も白みを減らして修正したのですがなかなか上手くいかず、どうしても絵画のようになってしまい苦労しました。目元などをはっきりさせるために高周波のレイヤーを2枚重ねにしました。
photoshop
上の画像をフェイスペイント除去、そばかす・唇修正しました。 phtoshop
K.H portfolio
卒業後に制作した、このポートフォリオです。
冒頭はフラッシュアウトまでをAfter Effectsで、その後はjQueryで制作しました。
フォームはStatic Formsを使用しています。
SSL対応・メール送信完了ページのリダイレクトやAfter EffectsからjQueryへの連携などは初めての実装だったので勉強しながらの進行でした。
冒頭のダークカラーで動きを大きく、ホワイトバックからは動きを抑えて、フラッシュアウトの前後の対比を意識して作りました。
HTML・CSS・jQuery・Illustrator・Photoshop・After Effects・xd・Static Forms
eve.eye
卒業後の制作作品です。
メガネフレームメーカーのwebサイトのリニューアルという設定です。
今季の新作アイテムの紹介ページというていのものです。
リニューアルということで既に認知度がある設定でしたので、写真をメインに印象付けるために説明文は最小限にとどめ、メーカーロゴの2色を基調に、シンプルに作るように心掛けました。top画像でインパクトを出したかったので、まずはブラックバックにロゴだけを書き出し黒と金だけの時間を多めに、その後に写真が大きく現れるような動きを付けました。lottieを使いましたがmp4ではなくjsonで実装すると反映の範囲に制限があって使えない表現が多く苦労しました。
HTML・CSS・JavaScript・jQuery・Illustrator・Photoshop ・After Effects・lottie・xd
IMFデンタルクリニック
卒業制作の作品です。
落ち着いた雰囲気と高級感で差別化をはかっている審美歯科の新規サイト立ち上げの設定です。
HOME、治療科目、ホワイトニングのページを制作しました。
高級感を特徴とした審美歯科なのでレイアウト崩れをおこさないようにブレイクポイントを３つに設定し、ホワイトとゴールドと余白の広さを意識して配置しました。
jQueryを使わずJavaScriptだけで制作してみました。
HTML・CSS・JavaScript・Illustrator・Photoshop・xd
K.H portfolio 別パターン
このポートフォリオの冒頭のアニメーションを変えたものです。
フラッシュアウトまでの部分をAfter Effectsで作りなおしました。
勉強中なので頭の中の構想を実現することに時間がかかりましたが、だいぶ思い描いていたものに近い感じに出来ました。こちらは遊び心を加えて人気アニメーションのパロディーを入れたもので、私の物静かなポートフォリオが出てくるまでの対比として話の流れもあるように意識して作りました。
こちらはtopページのみ作りました。
After Effects
eve.eye 別パターン
eve.eyeの冒頭のアニメーションを変えたものです。
ロゴのイメージからスケッチ風の流れにAfter Effectsで作りなおしてみました。
手書きの部分の量と写真がそのまま出る部分の量のバランスがなかなかイメージ通りにならず苦労しました。メガネの部分だけは濃いめにスケッチが残るように調整しました。
こちらはtopページのみ作りました。
After Effects
contact
下記フォームよりご記入ください。必須の項目は必ずご記入お願いいたします。