Web Designing 2014年6月号に執筆させて頂きました

この度、雑誌 Web Designing 2014年 6月号に執筆させていただきました。特集の『エモーショナルなCSS表現』に4ネタほど書いています。今回はサンプルファイル付き!雑誌で解説を読みながら、実例を見て参考にしてみてください!

↑私が10年以上利用している会計ソフト!


CSS3で実装できる、楽しくて注目させるような効果を紹介しています。私は『フィルタでレトロ感のある写真に』『乙女心をくすぐるハートのボタン』『ハートが浮き出るキュートなボタン』『手書き風フォントで親近感を演出』の4つを書きました。他にもいろんな技が多数!サンプルデータはWeb DesigningのWebサイトからダウンロードできます。

  • 回転するホバーアクション
  • キラリと光るメニューボタン
  • CSSだけで秘密のメッセージ!
  • CSSだけで描く、ストライプ、チェック、ドット
  • 伝えたい言葉にはラインマーカーを引いて
  • 画像の動きと、はじけるハートで魅せるギャラリー
  • 文字が浮かび上がるアニメーション
  • ブラウザの外から現れるモーション
  • 恋に落ちるテキストエディタ「Sublime Text」
  • マウスオーバーではずむナビゲーション
  • ウインドウ幅でアイコンのデザインを変える
  • レスポンシブなグローバルナビゲーション
  • ドキドキするボタン
  • キュンと狭くなるアニメーション
  • 文字も画像も簡単に装飾できる、魔法のようなプロパティ
  • じらすフルスクリーンアコーディオン
  • マウスオーバーで現れるコンテンツ
  • 回転するメッセージカード
  • Edge Web Fontのツール連携
  • 流れるようなモーションタイポグラフィ
  • 万能型CSSジェネレータ「Enjoy CSS」

もうひとつの特集は『「機能のデザイン」入門』。ユーザビリティ=使いやすさについて、身のまわりにあるモノを実例に挙げながら、機能をかたちにするための手法や理論を解説しています。Webデザインのユーザビリティについては日々学習しているつもりですが、実際に身近にあるものでも様々な配慮がされているんだなーと、改めて気付かされました。中でも「ふじようちえん」の話は読み応えありましたよ。ぜひ手にとってみてくださいね!

Web Designing 2014年 6月号を購入する

シェアする

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)