技術で結び、発展を描く
0%

お知らせ

当サイトは、現在リニューアルを進めております。そのため実績や料金はサンプルとなっております。
リニューアル完了後お知らせいたします。ご連絡はエックスのDMからお願いいたします。
SNS(エックスを除く)、下層ページには遷移しません。


  • Service

    // 提供するサービス一覧//

    ※このセクションでは、当方が提供するサービスを紹介する予定です。その紹介にアレンジしたシリンダースライダーを採用しました。このスライダーにはそれぞれのサービスにあった画像や動画を配置する予定です。 右にある矢印ボタンで、シリンダー状に並んだスライダーが回転します。今回は2枚目以降よりアレンジした部分について紹介させていただきます。

  • Feature-1

    // シリンダースライダーについて1 //

    元はシリンダー状に並んだ画像と、テキスト画像の2種類を回転させていましたが、
    "シリンダースライダー”
    "テキストスライダー"
    "カバースライダー"
    の3種類が連動するようにアレンジしました。

  • Feature-2

    // シリンダスライダーについて2//

    スライダー1枚につき画像1枚が原則ですが、複数の画像を組み合わせて1枚にすることで、様々な一面をシリンダースライダーで表現できると考えました。。

  • Feature-3

    // テキストスライダーについて //

    テキストは編集がしやすいように画像ではなく、HTMLで作成しています。これにより、以下のような形でリンクボタンを配置し、お問い合わせ、別のページやコンテンツへの導線を用意することができます。

  • Feature-4

    // カバースライダーについて//

    テキストの背景には視認性を上げる目的と、切替時にエフェクトを発生させることで目を引いていただけるようにしたいと思い、実装しました。使用したエフェクトは「スライダーウェーブ」です。ノイズの値を調整し、切り替わった際の波の表現を大きくしてあります。


Price.

※このセクションでは各プランと料金の紹介をする予定です。

プラン1 112,358~

  • TOP1枚のデザイン
  • TOP1枚のコーディング
  • アニメーション3種(WebGLを除く)
  • お問い合わせフォーム
  • フルイドレスポンシブ対応
  • SEO設定・セキュリティ対策
  • アフターサポート1ヶ月

プラン2 112,358~

  • TOP1枚のデザイン
  • TOP1枚のコーディング
  • アニメーション3種(WebGLを除く)
  • お問い合わせフォーム
  • フルイドレスポンシブ対応
  • SEO設定・セキュリティ対策
  • アフターサポート1ヶ月

プラン3 112,358~

  • TOP1枚のデザイン
  • TOP1枚のコーディング
  • アニメーション3種(WebGLを除く)
  • お問い合わせフォーム
  • フルイドレスポンシブ対応
  • SEO設定・セキュリティ対策
  • アフターサポート1ヶ月

プラン4 112,358~

  • TOP1枚のデザイン
  • TOP1枚のコーディング
  • アニメーション3種(WebGLを除く)
  • お問い合わせフォーム
  • フルイドレスポンシブ対応
  • SEO設定・セキュリティ対策
  • アフターサポート1ヶ月

プラン5 112,358~

  • TOP1枚のデザイン
  • TOP1枚のコーディング
  • アニメーション3種(WebGLを除く)
  • お問い合わせフォーム
  • フルイドレスポンシブ対応
  • SEO設定・セキュリティ対策
  • アフターサポート1ヶ月
プラン1

// リフレクトスライダーについて//

ボタンを押すことで画像とテキストが連動して切り替わります。

スライダーの画像は、中央に表示される画像のみ色がつく特性を活かし、黄金長方形が次第に形成されていく様子を表現しました。

1280px以上のモニターでは、テキストスライダーは3枚表示にすることで、他のプランを見てもらえるように調整しました。HTMLで編集可能です。

リフレクトスライダーの角度は、プランの可読性を上げるため、左奥方向に向かって伸びるよう角度を調整しました。
それに合わせて左右のスライドで透明度を変えており、左側をより薄く表示させています。



Message

このセクションでは片側のコンテンツを固定し、もう片側のコンテンツをスクロールさせる実装をしました。

画像はパーティクルスライドのエフェクトを使って切り替えています。

”ご挨拶"のカードが画面に入ったぐらいのタイミングで切り替わるよう調整しました。

// 一般のお客様、フリーランスで活動されている皆様へ //

当方はHP(ホームページ)やLP(ランディングページ)といったWEBサイト制作を、デザインから承っております。 依頼をご検討されているお客様、ご不明点のあるお客様はお気軽にご連絡下さい。 最新のお知らせはSNSで更新しておりますので、ぜひフォローをよろしくお願いいたします。

// デザイナー様へ //

現在、当方では事業を協力して下さるパートナーデザイナー様を募集しております。ご興味のあるデザイナー様は下記よりご連絡下さい。 また、「このデザインは実装可能か?」「アニメーションについて教えてほしい」など、制作部分で疑問やお困りごとがございましたら、 お気軽にご相談下さい。無料で対応させていただきます。

//ご挨拶//

はじめまして!札幌を拠点にWebサイト・LP制作者として活動しております、マサタカです。この度は当サイトをご覧いただきありがとうございます。

提携パートナーと協力し、お客様が求めるニーズに答えられるよう、誠意を込めて制作させていただきます。

制作がはじめてのお客様にとっては、様々な不安があるかと思います。そういった不安のひとつひとつを解消し、お客様に満足していただける結果をご提供できるよう務めます。

//経歴//

北海道生まれ、北海道育ち。

大学の心理科学部にて臨床心理を学びましたが、卒業後は医療の道へは進まず、興味・関心が高かった建築・インテリアの道へ進みました。

その過程でデザインを学び、ハウスメーカーの営業や施工管理(現場監督)の仕事に従事しました。病気をきっかけにあらためて自分が進みたい道を考えなおし、WEB業界の道へ進みました。

現在は某オンラインスクールのコミュニティの運営としても携わっております。

//今後の展望//

 多くのパートナーと協業し、高い技術を提供することで、お客様のご期待に添える制作者を目指して参ります。

そして常に新しいことを学ぶ姿勢を忘れず、ご提供できるサービスを増やしていけるよう成長し続けて参ります。

皆様に信頼されるWebサイト・LP制作者として、様々なお客様に貢献したいです。

FLOW.

  1. 01

    お問い合わせ(無料)

    各種お問い合わせフォームよりお気軽にご連絡下さい

  2. 02

    ヒアリング・お見積り(無料)

    ご希望をお伺いし、お客様に合ったプランをご提案。 プランに同意いただけましたら、見積書を作成いたします。

  3. 03

    ご契約

    見積書の内容にご納得していただけましたら、契約となります。 この時、制作手付金として合計金額の50%を頂戴いたします。

  4. 04

    デザイン

    お打ち合わせ後、ご希望のデザインを作成いたします。

  5. 05

    コーディング

    デザインが確定しましたら、実際にWebサイトを作成していきます。

  6. 06

    テストサイト確認

    はじめに、テストサイトにて内容や挙動を確認していただきます。 不備があった場合は修正をし、再度のご確認となります。

  7. 07

    本番サイト移行

    テストサイトのご確認後、本番サイトへ移行し、最終調整をさせていただきます。

  8. 08

    納品・ご請求

    本番サイトに不備がない場合、本公開(ファイル提出)をもって納品とさせていただきます。 納品完了後、所定の日程までに残りの制作費(50%)をお振込みいただきます。

  9. 09

    納品報告書の提出

    サイト制作にあたり使用したチェックシート、注意事項、操作方法をまとめたマニュアルを載せた「納品報告書」を後日送付させていただきます。


FAQ.

//スライダーzの応用//

スライダーzの、後ろから手前に向かってくる性質を用いて、答えのカードが切り替わる実装に挑戦しました。

質問を押すと、その番号に対応したカードが現れます。

カードが切り替わる際は目に留まりやすくなるよう、回転しながら手前に迫るアニメーションにしました。

また、カード自体にリンク機能も付与できるため、案内したいページへ誘導可能です。

課題は残っていますが、改善してより使いやすくしたいです。

  • Q1.営業時間や稼働日を教えて下さい
  • Q2.電話による相談は可能ですか?
  • Q3.制作日数はどれぐらいかかりますか?
  • Q4.制作予算があまりないので、希望のサイトが作れるか心配です
  • Q5.デザインだけ、またはコーディングだけ依頼することはできますか?
  • Q6.WebGLの実装はどのようなことが可能ですか?
    既存のサイトに取り入れることも可能ですか?
  • Q7.支払い方法は何が使えますか?
  • Q8.キャンセルすることは可能ですか?

Contact.

詳しい見積りを知りたい・お仕事のご依頼はこちら