Works | reboot code

Works

サイト名: ポートフォリオ（当サイト）
担当: デザイン、コーディング、WordPress化、サーバー導入
言語・ツール: HTML, Sass, jQuery, WordPress
サイトURL: https://rebcode.com
閲覧用ユーザー名: なし、パスワード: なし
ポイント: 当ポートフォリオサイトです。ゼロからデザインしてサーバ公開まで一気通貫で行いました。WordPress化を行いWorksの追加更新をできるようにしてあります。アニメーションは見やすさ重視で軽快にしました。Worksのスライダーは2つのSwiperを連動して使いやすさを追求しました。WordPressのデモサイトと静的htmlのデモサイトが共存できるように工夫してあります。

サイト名: 架空コーポレートサイト
担当: コーディング、WordPress化、サーバー導入
言語・ツール: HTML, Sass, jQuery, WordPress, Figma, gulp
サイトURL: https://rebcode.com/works/codeups/
閲覧用ユーザー名: demo、パスワード: demo
ポイント: カンプを基にコーディングからWordPress化まで行いました。BEM設計による共通パーツ化を行っています。画像サイズやテキスト量が変わってもデザインが崩れないよう比率管理を行っています。制作実績詳細ページは複数のスライダーを連動させてあります。フォントサイズや各種サイズは固定にせず、PC画面とタブレット画面で同一レイアウトで表示されます。

サイト名: 人材会社サイト
担当: コーディング、WordPress化、サーバー導入
言語・ツール: HTML, Sass, jQuery, WordPress, AdobeXD
サイトURL: https://rebcode.com/works/global-standard/
閲覧用ユーザー名: demo、パスワード: demo
ポイント: カンプを基にコーディングからWordPress化まで行いました。全10ページの構成もBEMやFLOCSSといったCSS設計を取り入れることでメンテナンス性を高めています。カスタムタクソノミー等を用いて投稿テーマ毎の使い分けを行いやすくし、利用者にも使いやすいWordPressテーマとなっています。

サイト名: カフェ風LP
担当: コーディング
言語・ツール: HTML, Sass, jQuery, Figma, gulp
サイトURL: https://rebcode.com/works/salad/
閲覧用ユーザー名: demo、パスワード: demo
ポイント: Figmaのカンプファイルからコーディングをいました。BEM設計で共通パーツ化を行い使いまわしやすくしました。2か所あるパララックスはJavaScriptでスクロールスピードに変化をつけています。お問い合わせフォームはカーソルをホバーすると入力欄が強調表示されるようにしています。

サイト名: Webサービスサイト
担当: コーディング
言語・ツール: HTML, Sass, jQuery, Figma
サイトURL: https://rebcode.com/works/ravek/
閲覧用ユーザー名: demo、パスワード: demo
ポイント: Figmaカンプからのコーディングになります。シンプルに見えて配置が一定ではないため、いかなる画面サイズでも崩れることがないようにレスポンシブ対応に注意しました。

サイト名: デジタル製品サイト
担当: コーディング、サーバー導入
言語・ツール: HTML, Sass, jQuery, AdobeXD, gulp
サイトURL: https://rebcode.com/works/sample-corp/
閲覧用ユーザー名: demo、パスワード: demo
ポイント: カンプを基にコーディングからサーバーへの公開作業まで行いました。3次元的なデザインが多いため、様々なデバイスでもデザインが崩れないよう実装当初からレスポンシブ対応を行うことで手直しを最小限に抑えました。その後、gulpの導入に合わせてサイトのデザインも変更しました。

サイト名: 建設会社サイト
担当: コーディング
言語・ツール: HTML, Sass, jQuery, Adobe Photoshop
サイトURL: https://rebcode.com/works/komuten/
閲覧用ユーザー名: demo、パスワード: demo
ポイント: Photoshopのカンプファイルからコーディングを行いました。メインビジュアル上のテキストはCSSでは再現が難しいデザインとされていたため、Photoshopから画像ファイルで書き出して再現するやり方と、text-shadowを重ね掛けして極力CSSで再現するやり方の２パターンで作成し、引き出しを増やすことに努めました。CSSはFLOCSSベースでメンテナンス性を意識しています。

サイト名: アクセサリーショップ
担当: コーディング
言語・ツール: HTML, Sass, jQuery, AdobeXD
サイトURL: https://rebcode.com/works/sobolon/
閲覧用ユーザー名: demo、パスワード: demo
ポイント: サイトのコンセプトに合わせて非対称デザインや落ち着いたアニメーションとなっています。お問い合わせフォームはGoogleフォームと連動するよう実装しました。

サイト名: コーポレートサイト
担当: コーディング
言語・ツール: HTML, Sass, jQuery, AdobeXD
サイトURL: https://rebcode.com/works/the-company/
閲覧用ユーザー名: demo、パスワード: demo
ポイント: AdobeXDカンプからのコーディングになります。ドロワーメニュー、スライダー、Googleマップ埋め込み、アコーディオン、アニメーションといった広く使われる手法を多く盛り込んであります。

< 戻る