memocarilog

5月17日に発売されました、Web Designing: 2014年6月号の特集1「エモーショナルなCSS表現」にて今回は1ページだけですが、記事の執筆とサンプル作成を行わせて頂きました。

今回の特集「エモーショナルなCSS表現」は気持ちが伝わるような動きのあるエフェクトをCSSで表現するというもので、CSSの様々なアイデアが詰まったものになっています。

今回初めて知ったプロパティもありましたし、知っているプロパティでも使い方次第でこういう見せ方があるんだ、とたくさんの発見がありました。サンプルもありますので、ぜひともダウンロードしてその動きを確認してみて下さい。

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

Web Designing: 2014年6月号

私が担当したのは、P.65 の「画像の動きと、はじけるハートで魅せるギャラリー」です。少しかわった動きのギャラリーですが、簡単に違った動きにカスタマイズもできます。省スペースで設置できるので、スマートフォンサイトなどでも使って頂けるんじゃないかなと思います。

特集2の「機能デザイン入門」は身近な看板やものを例にデザインが機能的に働いているわけが解説されています。少しでもデザインに関わりがある方には興味深い内容だと思います。個人的にもなるほど！の連続でした。

今月号もみどころがたくさんです。是非お手にとって見てくださいね。