コーディング

[Webデザイナーさんへ] そのデザインがコーディングしにくい理由と、改善ポイント詳説
投稿日:2019年12月27日

Webデザイナーにとって、自分のデザインがコーディングしやすいのかどうかは意外と気になるもの。 コーダー側は受け取ったデザインを粛々とコーディングするだけなので、あまり「こうしてほしい」と声を上げることはありませんが、デザイナーの観点だけでは気付きにくい問題が埋もれてしまっているか ...

【WordPress】クライアント目線で使いやすく!管理画面カスタマイズのポイント8つと対応方法まとめ
投稿日:2019年12月13日

WordPressのカスタマイズをしていくと、機能が多くなればなるほど管理画面がごちゃごちゃしてきます。 制作する側は慣れたものですが、実際に更新・投稿をするクライアントの視点で見ると、実は不親切設計になっているかも知れません。 そこで、今回はクライアントが使いやすい・ミスしにくい管理画面に ...

カンタン!CSSでフォームをレスポンシブにしよう
投稿日:2019年11月19日

いまやスマートホンを持っていない人はいないくらい、携帯端末が普及しました。 とは言いつつも、ホームページのフォームはまだパソコンの画面幅にしか対応していないサイトもちらほらと見かけます。 モバイル表示に対応するのはハードルが高いように感じるかもしれませんが、意外にも簡単です。 今回 ...

【css】テキストにマスクをかけて途中から色を変える + 1文字ずつ動かすアニメーション [clip-path][mix-blend-mode]
投稿日:2019年10月4日

タイトルが上手くまとめられなかったのですが…そのままの内容です! 写真の上に被っているテキストだけ色が変わっているデザインのコーディングを依頼されたことがあって(最終的には別のデザインになりましたが)、もしアニメーション付けるならどうコーディングするかな?と考えた結果のサンプルです。 mix ...

デザイン通りに近づけたい!文字に関するCSSプロパティ総まとめ
投稿日:2019年8月22日

これひとつで印象がガラリと変わる、デザインの要(と言っても過言ではないかも?)。 それが文字ではないでしょうか。 特に日本語は漢字・ひらがな・カタカナ・アルファベットに数字と、いろいろな印象の文字が並んでいるので、デザイナーさんの苦労もわかるような気がします。 今回は、コーディ ...

脱初心者!駆け出しコーダーがつまづきがちなポイントを解説してみた【デザイナーも必見】
投稿日:2019年8月16日

突然ですが、あなたはコーダーですか?それともWebデザイナー? そして、あなたはどのくらいコーディングに自信があるでしょうか? え?「自分デザイナーなんでコーディングとか関係ないし!」という人、ちょっと待って! まだ「戻る」ボタンを押さないでください!! コーディングとデ ...

【すぐに使える】ユーザビリティ&コンバージョン向上!WebサイトのためのUI・UX改善ポイント26こ
投稿日:2019年8月5日

せっかく良質なコンテンツや優れたデザインがあるのに、ユーザーにとって「使いにくい」サイトになっていませんか? サイトの使い勝手が良いかどうかはコンバージョンにも関わってくる重要なポイント。ディレクター・デザイナー・フロントエンドエンジニアのそれぞれが、ユーザーがどう利用するのかを予想しなが ...

SVGで画像を切り抜く [クリッピングマスク] [IE含め全モダンブラウザに対応]
投稿日:2018年7月20日

更新するコンテンツの画像が正方形・長方形以外の形のとき、どうコーディングしようか迷うことがありますね。 ただの円形なら CSS で丸める、背景が単色なら切り抜く部分を透明にした png や svg を画像の上に重ねるなどで対応できますが、どちらも難しい場合は SVG での切り抜きがおすすめ ...