インフィード記事で多様されるhtmlの特殊文字をおぼえよう




冒頭の画像。この特殊文字はどのような意味か見て分かりますか?

これは、ハートの記号ですね。

htmlではハートのような記号を特殊文字として扱い10文字、16文字進数で表記します。
実際の現場で広告用記事制作の場合はword等の文書編集ソフトで原稿を書き下ろしますが特殊文字はそのまま変換した形とかサイトからコピペする形でコーダーへ文章ファイルを送られがちです。
書き方は人それぞれだし技術的な面はデザイン制作側が関わるのでまぁ、これは仕方の無い事かもしれません。

さて、デザイン側はどうでしょうか?
wordpressならそのままコピペで対応できる特殊文字はかなりカバーできますよね。
デザインにかかわっている方たちでもコピペ対応の方は多いのではと思ったりしています。

ですが、コーダーとしてデザイナーの第一歩を歩みだす方は、厳密にコーディングできるように、Web基準にしっかり準拠した書き方を知見として身につけておく方がいいと思います。

ネット広告のインフィード用記事で優先されるのは獲得や結果です。
Web基準の準拠なんて正直どうでもいいと思われがちで中には「制作側のルールだろ」的に見られます。

coffeebreakではデザイナー思考で情報発信しているので、今回はコーダーとしてどのように対応するかを記事に残していきたいと思います。

ちなみに特殊文字で使われがちなのが、レビュー感や素人感がある♡と♥と♪です。
あとは、端末依存はありますが、☀とか☺絵文字調で親近感を誘います。

html, 特殊文字で検索してピックアップした便利サイトをまとめてみた。

特殊文字の一覧サイト


よく使う∟、使われる∟、いざという時の…
よく使いそうな代表的な特殊文字をピックアップして紹介しているサイトです。
いいなと思うのは、空白文字を特殊記号で扱う方法を前半で紹介しています。
これって案外重宝するんですよね。
※詳細を確認してみる


HTML特殊文字一覧(数値参照・文字参照)
W3Cに準拠した特殊文字をまとめているサイト。
ひとまとめに紹介ではなく、カテゴリごとに紹介しているので探しやすいのかなと思います。
※詳細を確認してみる


HTMLでよく使われる特殊文字
特殊文字をまとめているサイト。
ひとまとめに紹介ではなく、カテゴリごとに紹介しているので探しやすいのかなと思います。
※詳細を確認してみる


HTMLで使える特殊文字の書き方と文字コード一覧表
特殊文字をまとめているサイトでもありますが、カラーコードやhtmlタグの一覧といった
コーディングの知識を深めるには情報を探しやすようなサイトです。
特殊文字はカテゴリごとに紹介しています。
※詳細を確認してみる

さいごにW3Cについて


記事の内容とはずれますが、まとめサイトの中でW3Cに準拠したものがあったの補足的に説明しておきます。
W3CはWeb標準と呼ばれる規格で、ざっくりいうとコーディング技術は時代が進むにつれ進歩しまくっています。
進歩するのは良い面ですが、そのたびに技術独自のフォーマットや品質のばらつきといった悪い面もあります。
様々な課題をクリアする目的でWebで使用される技術を標準化しようという動きがかなり前から行われてきました。

私の所感では、html4からxhtmlで乱れまくったタグがhtml5のWeb規格が始まったことで
かなりスマートな書き方に変わってきたのかなと思います。
あとは、スマホシフトへの影響もWeb規格を加速させたトピックかもしれません。

今回の特殊文字も標準化が進んでいるのです。
https://www.w3.org/
このあたりは資格をとる方とかは勉強しておいた方がいいかもです。

この記事はここまで!

ここからはよく読まれる記事をまとめてご紹介します。
ひとあじ違うデザインノウハウに出会えるかもしれません。

【化粧品・コスメ】乾燥肌訴求のランディングページ(LP)デザイン5選

2018.09.23

【たった1問】遷移型アンケートページの構成とデザインを調べてみる

2018.09.01

【男性編】薄毛・育毛・増毛商材向けランディングページ(LP)デザインについてまとめてみた

2018.08.05

ランディングページ(LP)にエディトリアルデザインを取り入れる。ふきだし装飾編

2018.07.08

【年齢訴求別・5選】健康食品(ダイエット)のランディングページ(LP)ファーストビューとCVエリアデザイン

2018.06.17

CVエリアデザインのポイント。改善できればランディンページ(LP)は強くなる。

2018.05.27

電通グループが開発したAIのバナー自動生成ツールADVANCED CREATIVE MAKER β版のプレスで感じた事

2018.05.20

ランディングページ(LP)にエディトリアルデザインを取り入れる。マーカー編

2018.05.04

デザイナーとしてひと味違うランディングページ(LP)構成案の制作方法

2018.04.01

いつのまにか「Font Awesome」が新しくなってたので調べてみた

2018.03.11

動画ランディングページ(LP)効果改善への道は映像業界を理解する事からはじまる

2018.01.14


お気に入りの情報
が無かったでしょうか?
この記事の最後には、今までのデザイン情報やノウハウをレコメンド形式でご紹介しています。

お求めの記事に出会えますように。



スポンサード広告 by google