Works

制作実績

FLASHアニメをcanvasアニメに変換したサイト

使用スキル

  • HTML5
  • CSS3
  • JavaScript
  • jQuery
  • php
  • Sass
  • WordPress
  • Photoshop
  • Illustrator
  • Animate
  • Atom

担当業務

  • ディレクション
  • コーディング
  • フロントエンド
  • バックエンド
  • デザイン
  • イラスト

2011年頃に黒色を基調としてサイトを制作してほしいという要望を受けまして制作したサイトを、今回はさらにレスポンシブ化させました。その際に以前作ったFLASHアニメが各種ブラウザーをはじめスマホでも再生されず、新しく再生をさせるように設定しました。

現在FLASHはAnimateというソフトに名称を変え、アニメーションをjavascriptで制御するようになりcanvasアニメに変換させました。

  • ロゴデザイン

    看板犬のワンちゃんをモデルにしてロゴを制作し、canvasアニメで使いあらゆるデバイスで再生可能な、タイトルアニメーションをサイトで使用。

    社用車やステッカー、名刺なのでも使用して頂いております。

  • アニメーション

    2011年頃に制作した段階では、このアニメーションにFLASHアニメを使用していましたが、ブラウザ側よる再生サポート終了と、タブレットやスマホなどの新しいデバイスでは再生が出来ないので、新しくcanvasを導入して再生させました。JavaScriptによる再生なのであらゆるデバイスで同じように再生されることを実現しました。

    また、ホバーするとアニメーションが開始したり、拡大したりする処理はCSSで行っています。

  • 特定のページで色変え

    米国農機具メーカーJohn Deereの農機具やグッズ販売も展開されている為、こちらの販売ページになると黒と赤の配色からメーカーカラーである緑と黄色の配色に変更になります。これは特定のCSSをこのページのみ与えて、オーバーライドさせて表現しております。

  • jQueryを駆使したギミック

    ハンバーガーメニュー、TOPへ戻るボタンなどはJavaScriptのライブラリであるjQueryで実装。

  • 既存サイト+WordPress

    以前はレンタルブログでブログを書かれていたのですが、スパムや広告が多い為WordPressへ移行。移行にあたって既存の記事やコメントを全てWordPressへお引っ越。

    さらにブログ部分のみWordPressで構築しているので、既存のサイトと同じテーマを制作しリンクさせています。

    既存サイトであるTOPページにはWordPressで書いた記事のRSSをPHPで読み込ませて表示させています。