Web Corder
こちらはポートフォリオサイトです。
ご覧いただきありがとうございます。
Message
メッセージ
当サイトをご覧いただきありがとうございます。こちらはポートフォリオサイトになります。今まで制作してきたサイトやスキルを載せておりますので、ご参考にしていただけば幸いです。WEB制作をお受けする際は、デザインカンプの意図を理解し、迅速で丁寧な対応を心がけております。
Skill
スキル
HTML5/CSS3/Sass
エディタはVisual Studio Codeを使用しています。CSS設計ではSassを使いBEMやFLOCSSを取り入れ、納品後もメンテナンスや管理をしやすい設計を心がけております。レスポンシブ対応可能です。
JavaScript/jQuery
swiperを使ったスライド制作、ドロワーメニュー、アコーディオンメニュー等の基本機能を使用できます。
WordPress
独学で静的サイトをWordPressテーマとして再構築した経験があります。header.phpやfunctions.phpの分割構成、テンプレート階層、カスタム投稿タイプなどの基本操作ができます。また、ブロックテーマにも対応できるように学習しています。
Figma
Figmaで作成したデザインカンプからサイトをコーディングすることができます。
Adobe Photoshop
Photoshopで作成したデザインカンプからコーディングすることができます。また、簡単な画像加工や切り抜きが可能です。
Git/GitHub
実務での使用は未経験ですが、独学でVisual Studio Codeからのコミット・プッシュ操作や、Sourcetreeを用いたローカル・リモートリポジトリの同期を学びました。
Works
実績紹介
| サイト名 | 見つけて尾道レトロキャンペーン! |
|---|---|
| 使用言語 | HTML5/CSS3/Sass/jQuery |
| 制作期間 | 2週間 |
| コメント | Figmaのデザインカンプからコーディングした架空のLPです。PC、タブレット、スマホのレスポンシブに対応しています。また、サイトの保守性を高めるためにCSS設計から「BEM」の命名規則を取り入れています。デザインカンプとのズレや崩れを最小限にするために「Perfect Pixel」を使用し、サイトの最終調整を行いました。 |
| サイト名 | OHA! |
|---|---|
| 使用言語 | HTML5/CSS3/Sass/jQuery |
| 制作期間 | 2週間 |
| コメント | Figmaのデザインカンプからコーディングした架空のアプリ紹介LPです。スライダーは「Swiper」を使用しています。 |
| サイト名 | みなみ歯科クリニック（WordPress） |
|---|---|
| 使用言語 | HTML5/CSS3/Sass/PHP/jQuery |
| 制作期間 | 1カ月 |
| コメント | WordPressオリジナルテーマで作った架空の歯科クリニックサイトです。固定ページ・投稿・カスタム投稿などを活用し、更新しやすい構成に仕上げています。 コーディングはPHPで行い、ローカル環境で開発後、本番環境に移行してサイトを公開しました。CSS設計はSassを使用した「FLOCSS」で記述しています。 ※BASIC認証をかけておりますので下記ユーザー名・パスワードでログインをお願いいたします。 ユーザー名：site パスワード：site505 |
| サイト名 | Garden Salad |
|---|---|
| 使用言語 | HTML5/CSS3/Sass/jQuery |
| 制作期間 | 1週間 |
| コメント | Figmaのデザインカンプからコーディングしたカフェ風LPです。PC、タブレット、スマホのレスポンシブに対応しています。背景画像のパララックス効果やプライバシーポリシーのモーダルウィンドウを実装しました。 |
| サイト名 | SAKATA KOMUTEN |
|---|---|
| 使用言語 | HTML5/CSS3/Sass/jQuery |
| 制作期間 | 1週間 |
| コメント | Photoshopのデザインカンプからコーディングした架空の工務店LPです。PC、タブレット、スマホのレスポンシブに対応しています。スマホサイズの画面では、ドロワーメニューを実装しました。 |
| サイト名 | Ravek |
|---|---|
| 使用言語 | HTML5/CSS3/Sass/jQuery |
| 制作期間 | 1週間 |
| コメント | Figmaのデザインカンプからコーディングした架空のWEBサービスLPです。レスポンシブに対応しています。グリッドレイアウトで項目を配置したり、スマホサイズで横スクロールを実装しました。 |
| サイト名 | トラデジギャラリー |
|---|---|
| 使用言語 | HTML5/CSS3/Sass/jQuery |
| 制作期間 | 1週間 |
| コメント | Figmaのデザインカンプからコーディングした架空のギャラリーサイトです。ファーストビューにはswiperを使用したスライダーを実装しています。また、「Works」では各カードの絞り込みが可能で、カテゴリーやタグを選択すると、関連するカードが表示されます。 |