Portfolio Site
Toshitaka Yamauchi

スキル

skill
javascript/jQueryアイコン

JavaScript/
jQuery

  • ハンバーガーメニュー
  • アコーディオンメニュー
  • スクロールアニメーション
  • 遅延処理
  • スライドショーなど

※スライドショーなどはjQueryのプラグインを使用しますが、できる限り素のJavaScriptでコードをかけるよう心掛けています。

HTML/CSSアイコン

HTML5/CSS3

  • コーディング
  • レスポンシブ対応
  • SCSSでの記述

※メインで使用しているエディタはVisual StudioCodeですが、他のエディタも使用可能です。

WordPressアイコン

WordPress

  • 基本操作
  • CSSカスタマイズ

※提案用のテンプレート制作に携わり、一通りの操作を経験しました。

illustrator/photoshopアイコン

illustrator/
photoshop

  • バナー制作に必要な基本操作

※デザインやイラストについては学習中ですが、良いデザインをよく見て手を動かし身につけていきたいです。

XDアイコン

XD

  • 基本操作
  • ワイヤーフレーム作成

※XD上でデザインを完成させられるようになることを目標に学習中です。GitHub上にデータ保管しています。

PHP/SQLアイコン

PHP/SQL

  • 基本操作

※問い合わせフォームやWordPressのテーマ作成に必要になると思い学習しました。見よう見まねの域ではありますが、PHPの学習がJavaScriptの習得にも好影響を与えたように思います。またデータベースの操作を経験したことで、バックエンドでどのようなやり取りがなされているのか想像しやすくなりました。

作　品

products

WEBサイト

自主制作 天神橋筋商店街
使用ツール
XD/illustrator/photoshop/HTML/SCSS/JavaScript
製作時期
2022年4月～
製作期間
7週間（1日4～5時間の作業）
テーマ
天神橋筋商店街のwebサイトをリニューアルする想定で自主制作
工夫した点
  1. ロゴ、アイコンの作成
  2. マウスオーバーイベントの実装
  3. 遅延処理
  4. 絞り込み検索
詳細を表示
ロゴ、アイコンの作成
伝統ある商店街の力強さを表現しながら、若者にも関心をもってもらえるようなロゴを目指しました。
メインビジュアルはテーマはそのままに、写真を使用してより具体的に情報発信することを心がけました。
マウスオーバーイベントの実装
ナビゲーションにマウスを乗せるとアコーディオンメニューが開く処理を実装。
タッチ操作デバイス用に、クリックでも同じ動きになるよう実装。
遅延処理
先ほどのマウスオーバーイベントに0.3秒の遅延処理を実装。
マウスが通るたびにアコーディオンメニューが開いてしまう煩わしさを解消。
絞り込み検索
天神橋筋商店街に興味をもった人が「周辺スポット」ページにて、絞り込み検索ができるよう処理を実装。
inputタグの値を利用することで検索機能はつくれるようですが、現実にはサーバーと連携して実装すると思いましたので、検索機能はつけていません。
検索以外の挙動をJavaScriptで実装しました。
自主制作 さかい大学オープンキャンパス
使用ツール
XD/photoshop/HTML/SCSS/JavaScript
製作時期
2022年7月
製作期間
5日（1日4～5時間の作業）
テーマ
オープンキャンパスの特設サイトを想定して自主制作
工夫した点
  1. 画面幅に応じたハンバーガーメニュー内のレイアウト
  2. スクロールアニメーションの実装
詳細を表示
画面幅に応じたハンバーガーメニュー内のレイアウト
①1,080px以上②555px以上③555px未満の3パターンを制作。
JavaScriptを使用して①②ではアコーディオン、③ではドロップダウンメニューを実装。
スクロールアニメーションの実装
スクロールに応じてフワッと浮き上がるアニメーションを実装。
555px未満では変化時間と変化量を下げて、操作性を損なわないよう調整しました。
自主制作 ポートフォリオサイト
使用ツール
XD/illustrator/photoshop/HTML/CSS/JavaScript
製作時期
2022年3月～
製作期間
6週間（1日4～5時間の作業）
テーマ
ポートフォリオサイト
工夫した点
  1. ローディング画面を1度だけ表示する処理
  2. スクロールに応じてフェードインする処理の実装
詳細を表示
ローディング画面を1度だけ表示する処理の実装
JavaScriptのsessionStrageプロパティを使用。
初めてページアクセスするときに”Thank you for checking my Portfolio Site!”とご確認いただいたお礼を表示。
ページ更新のたびにローディング画面がでると閲覧者にとって煩わしく感じるので、更新される際にローディング画面を削除（2度目は表示しない）。
なお、新しいタブやウィンドウにページを開くと新しいセッションが開始するため、ローディング画面は表示されます。
スクロールに応じてフェードインする処理の実装
JavaScriptでスクロール量を監視。
各セクションの100px手前までスクロールされたら、対象要素が左右からフェードイン表示されます。
自主制作 photographer ポートフォリオサイト
使用ツール
XD/illustrator/photoshop/HTML/SCSS/JavaScript/jQuery(LightBox2)
製作時期
2022年4月
製作期間
2週間（1日4～5時間の作業）
テーマ
架空の写真家を想定してポートフォリオサイトを自主制作
工夫した点
  1. 属性を自動的に付与するjs処理
  2. カテゴリ名を選択するとカテゴリ内の写真だけを表示する
詳細を表示
属性を自動的に付与するjs処理
setAttributeメソッドを使用して、LightBox（jQueryプラグイン）を利用する際に必要な属性を自動付与する処理を実装。
写真を追加する度に属性を記述する手間をなくし、写真（imgタグ）を追加するだけでLightBoxを利用できる。
カテゴリ名を選択するとカテゴリ内の写真だけを表示する
カテゴリ名とカテゴリブロック（の順序）を紐づけることでクリック1つで表示切替を実現。
WordPressサイト WordPressサイト
使用ツール
illustrator/photoshop/CSS/WordPress
製作時期
2022年2月
製作期間
1週間（1日4～5時間の作業）
テーマ
提案用のWebサイトテンプレートを制作
工夫した点
  1. 福祉系に合うメインビジュアルの作成
  2. イメージを表現したバナー画像の作成
  3. OGP画像、ファビコンの作成
詳細を表示
福祉系に合うメインビジュアルの作成
イメージ：安心、前向き、就労
メインカラーやロゴに使用している青系色と馴染む配色で、なおかつ安心感を表現。
就労をイメージしやすいイラストを使用。
また、横幅が変わってもメッセージを読みやすいレイアウトを検討。
イメージを表現したバナー画像の作成
イメージ：スタッフの温かみ、サポート、前向き
メインカラー（水色）を使用しながら、黄色を加えて温かみや未来へ前向きなイメージを表現。
OGP画像、ファビコンの作成
SNSで共有されるときやブラウザタブに表示されることも考慮。
WordPressサイトのHTML化 ドクターしろくま
使用ツール
illustrator/photoshop/HTML/CSS/JavaScript/jQuery(slick)
製作時期
2022年1月
製作期間
2週間（1日4～5時間の作業）
テーマ
WordPressの機能をJavaScriptで実装する
工夫した点
  1. GoogleMapのレスポンシブ対応
  2. ハンバーガーメニュー、モーダル、下部ナビゲーションの制御
  3. スクロールに応じてナビゲーションの入れ替え
詳細を表示
GoogleMapのレスポンシブ対応
縦横比を保ったまま可変にするため、heightではなくpaddingを使用。
ハンバーガーメニュー、モーダル、下部ナビゲーションの制御
モーダルが展開しているときは下部ナビゲーションを非表示かつスクロール及びタッチ操作を無効化。
モーダルが閉じると下部ナビゲーションを表示、スクロール及びタッチを有効化。
WordPressで実装されていた機能をJavaScriptで実装しました。
スクロールに応じてナビゲーションの入れ替え
スクロール量をJavaScriptで監視し、クラスを付け替えることで実現。
WordPressで実装されていた機能をJavaScriptで実装しました。

バナー・ロゴ制作

使用ツール
illustrator/photoshop
テーマ
クリニックのバナー画像制作（インフルエンザワクチン予防接種、コロナワクチン接種、PCR検査の実施告知）
天神橋筋商店街サイトのメインビジュアル、ロゴ、バナー画像制作
福祉系サイトのメインビジュアル、バナー画像制作
工夫した点
（詳細はへ記載）

経　歴

history
自己紹介画像
自己紹介
氏名 山内敏貴（やまうちとしたか）
生年月日 1990年1月21日
出身 大阪府堺市
趣味
  • 野球（高校まで野球部に所属）
  • 健康管理（筋トレ、食事）
  • 読書（インプット）
  • 勉強会の開催（アウトプット）
性格
  • 好奇心
  • 探究心
  • 慎重
  • 繊細
職　歴
2013.04 機械商社で学生採用を経験（illustratorやWordPressにも触れる）
リクナビ（学生採用ページ）に掲載していたサムネイル画像を、通常の会社画像から面接日時を明示したオリジナル画像に変更したことで、応募が明らかに増加。ニーズに応える情報発信の威力を実感しWebに興味をもちはじめる。
2018.05 化学メーカーで人事を経験
競合他社にくらべ学生からの人気はやや低い会社だったため、学生のニーズに合わせて自社の魅力を発信することに注力。情報収集し整理し”対面”で発信することに面白みを感じるも、（コロナ禍に入り）Webも扱えるようになりたいと思いはじめる。
2020.07 ヒューマンアカデミー・WEBデザイナー総合コースを受講
オンデマンド講義で広く浅くWebデザイナーとして必要な知識を習得。
2021.05 同コースを修了
HTML/CSS/illustrator/photoshopは扱えるようになるも、JavaScript/PHPの理解が追いつかず改めて学習しようと決意。
2021.06 Progate、ドットインストール等でJavaScript/PHP/SQLを学習
プログラミングの基本やJavaScript/PHPのコードの書き方を学習。JavaScriptを優先して習得するよう考えを改める。
2022.01 企業インターンに参加
WordPress（テーマ:SWELL）を使用したwebサイト制作、バナー制作を経験。

お問合せ

contact

お名前

メールアドレス

お問合せ内容


（Googleフォームと連携しています）