☰

Loading...

masahiro

Portofolio

Scroll down

サイトデザイン・コーディング

MiMi

「MiMi」という名前は、「兎の耳がひょっこりと立っているかわいい様子」から着想を得て、【あなたのそばに寄り添うお菓子】をテーマに展開しているお菓子屋さんのコンセプトを反映しました。
サイト全体を通じて、かわいさを感じられるデザインを目指し、Figmaでワイヤーフレームを作成。パステルカラーを基調とし、微細なアニメーションを活用することで動きに柔らかさを持たせました。
コーディングには、Bootstrapを活用し、レスポンシブデザインを実現。Sassを使用することで、効率的なスタイリング管理を行いました。また、独自のCSSカスタマイズを行い、テーマに合わせた柔らかい印象のレイアウトを実装しました。

制作時間：56時間
使用技術：Bootstrap/Figma/html/Sass/javascript

大石会計事務所

このプロジェクトでは、相談者が安心して相談できるカジュアルな雰囲気のデザインを目指しました。
まず、Figmaを使用してワイヤーフレームを作成し、その後、BootstrapとSassを用いてコーディングを行いました。デザインには動きのある要素を取り入れ、カジュアル感をさらに強調しました。
特に、文字や画像が流れるエフェクトを採用することで、視覚的に魅力的な体験を提供しています。

制作時間：48時間
使用技術：Bootstrap/Figma/html/Sass/javascript

VESSI

VESSIは防水靴の会社で、日本語サイトがないため日本語サイトのPRサイトを作るというテーマで作成。
ターゲット層が20代～30代の女性によくみられているためその層をペルソナに設定し、可愛いサイトデザインにしました。

制作時間：56時間
使用技術：Figma/html/css/Sass/javascript

ブリッジ英会話スクール

誠実感のある英会話教室のイメージを色味で表現し、スクールの魅力が伝わるように写真を大きく使用しました。Figmaでワイヤーフレームとデザインを作成し、Sassを使用してコーディングしました。 また、ブロークンレイアウトを採用し、画面を見やすく工夫しました。画面幅が小さくなった際には、画面下部にボタンが追従するようにして、使いやすさを向上させました。
さらに、AOSを使用してアニメーションの速度を調整し、ふんわりとした動きでワクワクする印象を演出しました。

制作時間：64時間
使用技術：Figma/html/css/Sass/javascript

スマートステーショナリー
株式会社

ワードプレスの関数に慣れることを目標に、勉強を兼ねてこのサイトを作成しました。

制作時間：56時間
使用技術：WordPress/html・css

mont bell

元のサイトは見づらさが気になったため、写真を大きく使い、
視覚的に分かりやすいデザインにリニューアルしました。

制作時間：57時間
使用技術：Photoshop

ジョイボーイ

ネットショップ（ECサイト）を【WooCommerce】で構築しました。
テーマ【Astra】プラグイン【Elementor】でTOPページは制作しました。
Udemyの教材を使用してスクラッチから制作する方法を学習しました。
※TOPのみ実装

制作時間：56時間
使用技術：WordPress

株式会社大山ローカル

テーマ「SWELL」を使って企業サイト（コーポレートサイト）の作成しました.Udemyの教材を使用してスクラッチから制作する方法を学習しました。

制作時間：57時間
使用技術：WordPress

ヤノ電子製作所

コーポレートサイトを【Sydney】テーマで構築しました。
Udemyの教材を活用し、スクラッチから制作する方法を学びました。

制作時間：56時間
使用技術：WordPress

&Premium

コーディング練習として、デザインカンプを参考にしながら取り組みました。
メニューをサイドバーに固定するデザインを学び、無事に完成させました。

制作時間：32時間
使用技術：html/Sass/javascript

sunday flower

コーディングの練習として、参考画像をもとに制作に取り組みました。
パララックス効果や余白の取り方について学びながら、完成させました。

制作時間：32時間
使用技術：html/Sass/javascript

鹿熊組

ブルーを基調に、スタイリッシュで信頼感のある、かっちりとした印象のデザインに改修しました。時代遅れにならないよう、古さを感じさせない現代的なテイストを意識しています。ネットの学習サイトを利用してFBをもらい、余白の取り方や確認し方を理解し、ブラッシュアップの仕方について学びを深めました。

制作時間：56時間
使用技術：photoshop

バナー・ロゴ・アプリデザイン

健康器具

お菓子

シャンプー

転職バナー

紅茶バナー

指輪バナー

ハンバーガーショップ

写真合成

色替え

肌補正

柄の合成

ワイヤーフレーム

Wanna be buddies？

Strawberry Fair

父の日

ふれあいカフェ

JavaScript学習のまとめ

In the sea

Javascriptの理解を深めるために「オセロゲーム」「計算機」を作りました。
学習のまとめとして、水の中をイメージしたページに情報をまとめました。

制作時間：32時間
使用技術：html/Sass/javascript

計算機

JavaScriptで計算機を実装しました。
計算機らしい見た目になるよう、押した数字や演算子がディスプレイにわかりやすく表示されるように工夫しました。
また、演算子を定義して、実際に計算ができる仕組みも実装しました。
さらに、ボタンにホバーすると色が少し変わり、押す場所が分かりやすくなるようにしています。

制作時間：120時間
使用技術：Bootstrap/html・css/javascript

オセロゲーム

JavaScriptを使用して、オセロゲームを作成しました。
黒が置けない場合や、ひっくり返す条件分岐を実装するのに特に苦労しましたが、
試行錯誤を重ねて完成させました。
ゲームのプレイ中に石がひっくり返る際のルールやアルゴリズムを精査し、
どの方向にひっくり返すかを正確に判定できるように工夫しています。
また、ゲームを途中でリセットできるボタンを追加し、
いつでも新しくゲームを開始できる機能を付けました。
さらに、プレイヤーの順番や点数がリアルタイムで表示されるようにし、
誰が優勢かをひと目で確認できるに仕上げています。

制作時間：60時間
使用技術：Bootstrap/html・css/javascript

じゃんけんゲーム

JavaScriptでじゃんけんゲームを作成しました。勝敗が視覚的に分かりやすくなるようにUIに工夫を凝らし、ユーザーが楽しめるよう意識しました。
中でも、「あいこ」の判定処理では条件分岐の整理に時間がかかりましたが、繰り返し検証することで正確な動作を実現できました。

制作時間：60時間
使用技術：html・css/javascript

ギャラリー

ギャラリーとして画像を整列させ、ユーザーが検索欄から目的の画像を絞り込めるようにしました。
画像を1点選択すると、他の画像は非表示となり、選択した画像のみが強調表示されます。強調時には赤い枠を表示し、ズームアップさせることで視認性を高め、選択されていることが一目で分かるように工夫しました。

制作時間：50時間
使用技術：html・css/javascript

ポートフォリオ

今までに作成した作品一覧を
ウェブサイト形式で掲載しています。

詳細はこちら

わたしについて

経歴

インハウスデザイナーやコーダーとしての経験を経て、スキルアップのために公共職業訓練校に通い、Webデザイナーとしても実務を積んできました。
デザイン業務では、確認作業の重要性を実感し、ミスを防ぐためにも、確認の時間をしっかり確保できるよう心がけて作業に取り組んでいます。得意なデザインは「かわいいデザイン」や「すっきりとしたデザイン」です。
今後は、デザインからコーディングまで幅広く対応できるクリエイターを目指しています。

プロフィール

名前

田口 真啓

血液型

O型

性格

温厚

長所

継続して物事に取り組める

web制作で使用した事のある技術

photoshop

実務経験あり。バナー・LP・ウェブデザインをする事ができる。

Illustrator

実務経験あり。ロゴのデザインができる。

Adobe XD

60枚以上の画像を書き出して、それらをサイトで使用するために番号をリネームしたことがあります。また、PC版デザインをスマートフォン版に修正した経験もあります。さらに、コーディング時には、デザインカンプの数値や細かいディテールを確認するために使用した経験があります。

Premiere Pro

実務経験あり。動画のカット・テロップ入れが出来る。

Figma

実務経験あり。デザインの確認の際、共有リンクを使用しデザインの共有をした事があります。自己学習では、ワイヤーフレーム、デザイン作成作成の際に使用した事がある。

inDesign

Udemyの教材を使用して、チラシと雑誌の構成をした経験がある。

RMS

実務経験あり。マニュアルを見ながら商品登録をした経験があります。また、出店に必要な画像作成をした経験があります。

楽天TDA広告

実務経験あり。楽天のレギュレーションを守って画像の作成をした経験がある。

プログラミングで使用した事のある技術

WordPress

実務経験あり。既存のCMSを使用し、記事を更新したことがある。また、オリジナルテーマでのサイト制作をし、学習の理解を深めました。

VS Code

実務経験あり。サイト作成の際に使用した事がある。

HTML/CSS

Emmetを活用して、HTML/CSSのコーディングを効率的に行うことができます。また、レスポンシブデザインにも対応可能です。さらに、ディベロッパーツールのLighthouseを使って表示速度の改善に取り組んだ経験があります。加えて、セマンティックコーディングを意識した構造的なHTMLの記述ができ、BEM設計を意識しています。

Sass

実務経験あり。サイト制作の際に使用した事がある。

Bootstrap

ワイヤーフレーム、デザイン作成作成の際に使用した事がある。

PHP

ハンズオンでメモ機能、検索機能を実装した事がある。

jQuery

調べれば簡単なアニメーションをつける事ができる。

GitHub

ポートフォリオサイトを作る為に使用した経験がある。

Vercel

ポートフォリオサイトを作る為に使用した経験がある。

filezilla

実務経験あり。自社サーバーのデータ更新で使用した事がある。

MySql

PHPでメモ機能、検索機能を実装した際にテーブル・データベースの作成をして情報を追加削除したことがある。

ChatGPT

プログラミング等のエラー修正に使用した事がある。

webに関する技術

Excel

実務経験あり。簡単な関数であれば調べて表が作れる。

Word

実務経験あり。グラフを利用し文章をまとめる事ができる。

Slack

実務経験あり。社内の連絡手段で使用していた事がある。

Backlog

実務経験あり。業務の進捗管理ツールとして使用した事がある。

その他経験のある技術

Instagram

実務経験あり。自社SNSアカウントで画像更新をした事がある。

cubase

MIDI・LINE録音したものをミックスする事が出来る。

CLIP STUDIO PAINT

基本的な操作をして絵を描いた事がある。

Procreate

基本的な操作をして絵を描いた事がある。

Laravel

マイグレーション機能を使ってデータベースに変更を適用したことがある。

ワイヤーフレーム

サイト制作の際Figmaで作成してからコーディングしたことがある。

制作時間作成

求職者支援訓練校で、「サイトのリニューアルをプレゼンする」というグループワークで作成をしました。

スケジュール作成

求職者支援訓練校で、「サイトのリニューアルをプレゼンする」というグループワーク作成をしました。

UI/UXデザイン

ネット上にあるまとめサイトを利用し、UI/UXの改善方法について理解を深めました。

Notion

実務経験あり。タスクの管理や、実務で学んだことを共有できるように記事としてまとめた経験がある。

  • 保有資格
  • Webクリエーター能力検定スタンダード(HTML5)
  • Photoshopクリエーター能力検定試験スタンダード
  • illustratorクリエーター能力検定試験スタンダード
  • PHP技術者認定初級
  • PHP8技術者認級準上級
  • ネットマーケティング検定
  • Microsoft Office Specialist Word 2010
  • Microsoft Office Specialist Excel 2010
  • 日商簿記検定試験3級