【WordPress】クライアント目線で使いやすく!管理画面カスタマイズのポイント8つと対応方法まとめ
WordPressのカスタマイズをしていくと、機能が多くなればなるほど管理画面がごちゃごちゃしてきます。 制作する側は慣れたものですが、実際に更新・投稿をするクライアントの視点で見ると、実は不親切設計になっているかも知れません。 そこで、今回はクライアントが使いやすい・ミスしにくい管理画面にするた ...
東京ホームページ制作
Copyright (c) BRISK All Rights Reserved.
【WordPress】クライアント目線で使いやすく!管理画面カスタマイズのポイント8つと対応方法まとめ
WordPressのカスタマイズをしていくと、機能が多くなればなるほど管理画面がごちゃごちゃしてきます。 制作する側は慣れたものですが、実際に更新・投稿をするクライアントの視点で見ると、実は不親切設計になっているかも知れません。 そこで、今回はクライアントが使いやすい・ミスしにくい管理画面にするた ...
CSSでフォームをレスポンシブ【カンタン!サンプルソース有】
いまやスマートホンを持っていない人はいないくらい、携帯端末が普及しました。 とは言いつつも、ホームページのフォームはまだパソコンの画面幅にしか対応していないサイトもちらほらと見かけます。 モバイル表示に対応するのはハードルが高いように感じるかもしれませんが、意外にも簡単です。 今回は、お問い合 ...
【css】テキストにマスクをかけて途中から色を変える + 1文字ずつ動かすアニメーション [clip-path][mix-blend-mode]
タイトルが上手くまとめられなかったのですが…そのままの内容です! 写真の上に被っているテキストだけ色が変わっているデザインのコーディングを依頼されたことがあって(最終的には別のデザインになりましたが)、もしアニメーション付けるならどうコーディングするかな?と考えた結果のサンプルです。 mix-bl ...
デザイン通りに近づけたい!文字に関するCSSプロパティ総まとめ
これひとつで印象がガラリと変わる、デザインの要(と言っても過言ではないかも?)。 それが文字ではないでしょうか。 特に日本語は漢字・ひらがな・カタカナ・アルファベットに数字と、いろいろな印象の文字が並んでいるので、デザイナーさんの苦労もわかるような気がします。 今回は、コーディング(CSS) ...
脱初心者!駆け出しコーダーがつまづきがちなポイントを解説してみた【デザイナーも必見】
突然ですが、あなたはコーダーですか?それともWebデザイナー? そして、あなたはどのくらいコーディングに自信があるでしょうか? え?「自分デザイナーなんでコーディングとか関係ないし!」という人、ちょっと待って! まだ「戻る」ボタンを押さないでください!! コーディングとデザインはWebサイ ...
【すぐに使える】ユーザビリティ&コンバージョン向上!WebサイトのためのUI・UX改善ポイント26こ
せっかく良質なコンテンツや優れたデザインがあるのに、ユーザーにとって「使いにくい」サイトになっていませんか? サイトの使い勝手が良いかどうかはコンバージョンにも関わってくる重要なポイント。ディレクター・デザイナー・フロントエンドエンジニアのそれぞれが、ユーザーがどう利用するのかを予想しながら制作 ...
SVGで画像を切り抜く [クリッピングマスク] [IE含め全モダンブラウザに対応]
更新するコンテンツの画像が正方形・長方形以外の形のとき、どうコーディングしようか迷うことがありますね。 ただの円形なら CSS で丸める、背景が単色なら切り抜く部分を透明にした png や svg を画像の上に重ねるなどで対応できますが、どちらも難しい場合は SVG での切り抜きがおすすめです。 ...
【レスポンシブ】CSSで作るtableデザイン&コーディング【コードあり】
もはやスマホ表示を考えないwebサイトは新規制作やリニューアルではほぼない今日、どんなに横に長いテーブルでもレスポンシブでどうするか考える必要があります。 PCで組むだけなら何も考えずに済むのですが、スマホの縦長の画面で如何にユーザビリティを落とさず横長になりがちなテーブルを表示させることができる ...
SVGの書き出し方【よくある失敗例】+ IllustratorからPhotoshopにシェイプをコピー
SVGは拡縮可能なベクター画像です。 PhotoshopでもIllustratorでも、jpgやpngと同じようにアセット機能で書き出しができます。 ですが、「中身がパスではなく画像になっている」という問題がよく起きるので、本記事ではよくある失敗例をまとめてみました。 上手くいかないあるある 「 ...
SVGを動かす [cssアニメーション/クリッピングマスク/波/線を描く]
最近SVGを使用してコーディングすることが多くなりました。 SVGとはScalable Vector Graphics(スケーラブル・ベクター・グラフィックス)、つまり伸縮自在のベクター情報で作られた画像のことです。 一つのSVGファイルで、どのサイズでも綺麗に表示させることができます。 また、テ ...