Webデザイナーになるために必要なスキルは何か。そしてその次のキャリアパスはどんな道があるのか。道は決して一本ではなく多岐に渡ります。UXベン図の3スキル「ビジネス」「デザイン」「テクノロジー」それぞれに特化した代表的な7つのキャリアパスを解説し…

WordPressのデータ移行。以前はダッシュボードで完結しない複雑な作業でした。最近は良いプラグインのおかげでダッシュボードだけで移行がしやすくなりました！コンテンツの全移行は「All-in-One WP Migration」、一部移行は「DeMomentSomTres Export」がお…

デザインってどうやるの？むずかしそう。自分にできるのかな？私もそう思っていました。デザインにはいくつかの「基本原則」があります。その原則をギュッと凝縮した6記事をご紹介。「これを読めば独学デザイナーでもデザインに取り組める！」を目指して書き…

前回、様々な色相環を見ていきました。今回はいよいよ複数の色を組み合わせた「配色」の基本に入っていきます！複数の色はいったいどうやって選んでいったらいいのか？目的によって変わります。「主従をつける配色」「同等に分類する配色」の2つの目的で考え…

デザインの配色はRGBやCMYKよりもHSBを使った方が検討しやすいです。しかし、HSBの中の「H値（色相）」について調べるたところ、一筋縄ではいかないことがわかりました。色相環にはHSB色空間、表色系（マンセル、オストワルト、PCCS、イッテン、NCS）、Web配…

タイポの道も一歩から。文字のデザイン「タイポグラフィ」。様々な要素がありとっても奥が深い世界です。まずは見出しと本文を組み合わせて「箱組み」を組んでみます！ポイントは「行長」「行間」「ジャンプ率」です。

前回は画面の「アスペクト比（縦横比率）」を見ていきました。今回は画面の「分割」です。デザイン、レイアウトにおいてメイン要素、サブ要素を配置する際に画面をどこで分割するか？シンメトリー、黄金分割、白銀分割、3分割など「分割比」による分割と、あ…

デザイン上でよく使われるアスペクト比（縦横比率）。なんとなく言葉としては理解しているんだが実際の形状を並べて一眼で比較できるよう、一覧にしてみた。

スマホの小さい画面でメニューをしまっておくのによく使われるハンバーガーメニュー 。これまではJSのクリックイベントでclass名を追加して実現してました。擬似クラス:targetを使うとCSSだけで実現できると知って試してみた。

フォームの送信ボタンのinputタグにアイコン（擬似要素）を加えたかったのですが、できませんでした。それで、ボタンの外をdivで囲んで擬似要素を加えました。そしたら、なんということでしょう。ボタンの上に重なったアイコン部分は送信などのイベントが発…