Works
制作したもの
NexRise
Neo Sense 2035
ABC School
Carex Field Portfolio
Task Planner
2OT
×
| サイトタイトル： | NexRise |
|---|---|
| GitHub： | https://github.com/Carex-Field/NexRise |
| 制作期間： | ５人日 |
| 担当： | 設計／デザイン／コーディング |
| コメント： |
DX支援コンサルティング会社の架空コーポレートサイトです。 サービスや事例はWordPressのカスタム投稿で作成し、 シングルページはカスタムフィールドに文章を入力するのみで作成可能となっており、 普段コーディングをしない方でも簡単に管理できるように設計して制作しました。 |
閉じる
×
| サイトタイトル： | Neo Sense 2035 |
|---|---|
| GitHub： | https://github.com/Carex-Field/NEO-SENSE-2035 |
| 制作期間： | ３人日 |
| 担当： | 設計／デザイン／コーディング |
| コメント： |
近未来のテクノロジーとアートの融合をテーマにした架空のイベントLPです。 React×TypescriptでのLenis, GSAP, Swiperのスクロールアニメーションの導入を目的に制作しました。 LenisとGSAPを用いたスムーズなスクロール体験と、SwiperによるインタラクティブなUIを組み合わせ、「見る」だけでなく「体験する」サイトを目指しました。 特に、スクロールと連動したアニメーション設計や、セクションごとの役割分担（導入・没入・体験・行動）を意識しています。 |
閉じる
×
| サイトタイトル： | ABC School Kids Programming |
|---|---|
| 制作期間： | ５～６人日 |
| 担当： | デザイン／コーディング |
| コメント： |
職業訓練の修了制作として作った、子ども向けのプログラミングスクールの架空LPサイトです。 子どもが入塾してもらうことを目標に、小学生の子どもを持つ親をターゲットとしています。 小学校での必修化などによるプログラミング教育の重要性の説明や、通われている方のレビューなどを取り込むことで、目標が達成されるように意識しました。 |
閉じる
×
| サイトタイトル： | Carex Field Portfolio |
|---|---|
| GitHub： | https://github.com/Carex-Field/Portfolio |
| 制作期間： | ３人日 |
| 担当： | 企画／デザイン／コーディング |
| コメント： |
私自身のポートフォリオサイトです。 この１ページで情報を得られるようにすることで、ページ移動の手間を少なくしています。 また、できるだけシンプルなサイト構造になるように意識しました。 プロフィールの部分などについては今後もブラッシュアップしていきたいです。 |
閉じる
×
| サイトタイトル： | Task Planner |
|---|---|
| GitHub： | https://github.com/Carex-Field/Task-Planner |
| 制作期間： | ２人日 |
| 担当： | 企画／デザイン／コーディング |
| コメント： |
React（TypeScript）で作成したタスク管理アプリです。 ダークモードやローカルストレージでの保存機能が備わっています。 また、機能実装だけでなく、state設計・コンポーネント分割・スタイル設計を重視して開発しました。 |
閉じる
×
| サイトタイトル： | 2OT - Double Over Time- |
|---|---|
| 制作期間： | ６～７人日 |
| 担当： | 企画／デザイン／コーディング |
| コメント： |
NBA観戦をモチーフにしたスポーツカフェの架空サイトです。 ゆったりとした時間を過ごしてもらうことを意識して、余白を大きめに取るようにデザインしました。 また、配色についても淡い暖色系を使用しています。 |
閉じる
About
私について
Profile
氏名：菅原 尭（すがわら たかし）
生年月日：1992年1月22日
これまでフロントエンドエンジニアとして、HTML5／CSS3／JavaScriptを中心としたコーディング業務に従事し、レスポンシブデザインやWordPressを用いた実装経験を重ねてきました。
コーポレートサイトやLPの新規Webサイトの制作だけでなく、既存サイトの修正や更新も多く担当してきました。
Web制作会社勤務時には短い開発期間の案件も多く、そのため限られたスケジュールの中で品質を担保しながら実装を進めるスピード感を強みとしています。
再利用性を意識したコンポーネント設計や、修正影響範囲を最小限に抑える実装を心がけ、柔軟かつ迅速に対応してまいります。
また、顧客との要件ヒアリングや仕様調整にも担当エンジニアとして参加することもあり、非エンジニアの方にも分かりやすい説明を心がけながら、ユーザー体験や運用のしやすさ等を踏まえた最適な形に落とし込むよう努めてきました。
チームとしてデザイナーやディレクターとも密にコミュニケーションを取りながら、技術的な制約や代替案を丁寧に共有することで、認識のズレを早期に解消し手戻りの少ない開発進行に貢献いたします。
Skills
HTML5/CSS3
テキストエディタはVisual Studio Codeを使用しています。レスポンシブデザインの対応も可能です。資格としてHTML5プロフェッショナル認定試験レベル2を取得しています。
JavaScript
jQueryで動きを出すなどを始めとして、基本的なものについては記述可能です。また、初めて触れるようなAPIでも、コードを理解しエンドユーザーが希望するような動きを設計した経験もあります。
WordPress
オリジナルテーマの作成も可能で、前職では検索機能の付いた商品ページの作成なども行っておりました。また、カスタムフィールドなどを用いて普段コーディングしない運営者でも使いやすいように設計することも可能です。
Photoshop
Webデザインの勉強にあたり、ソフトの基本的な操作を学び、現在はバナーの制作などをしています。また、Webサイトのデザインカンプ作成も行っています。
SEO
ユーザーの検索意図からSEOを意識したサイト構造を考えるなど、基礎的な知識については習得しています。