Webデザイナーが施す9つのSEO対策 | corto – デザイン制作事務所
Note
フリーランスWebデザイナーである私が施しているSEO対策について紹介します。 前提として ここで案内するSEO対策は、Webサイト制作初心者やSEO対策はなんとなく理解しているがうまくいかない方向けの内容です。SEOを専門としている方には向きません。 また、自社のサイトにSEO対策を施して成果を出したい方は、SEO対策をサービスの主軸として提供していて信頼できるSEO専門会社に依頼するのがベスト…
ロゴやウェブページのデザインを検討する際、「どんな雰囲気にしたいのか」や「どんな印象を与えたいのか」を明確に言葉で示すのは、思った以上に難しいものです。依頼する側と制作する側が、頭の中にあるイメージを共通認識として持つためには、抽象的な感覚を整理し、具体的なキーワードとして提示する方法が有効です。 今回は、「プロフェッショナル・品質志向」「創造性・革新性」「文化的・多様性」「穏やか・洗練された雰囲…
ロゴデザインを依頼する際に大切なのは、デザイナーにあなたの事業について情報を伝えること。そのために欠かせないのが「ヒアリング」です。 本記事では、デザイナーが具体的にどのような項目をヒアリングし、それらがどのような意図をもった質問なのかを紹介いたします。この内容を理解してからヒアリングに望んでいただくことで、ロゴ制作がよりスムーズに進み、理想的な仕上がりになるはずです。 事業情報 ロゴに記載する名…
コンテンツの幅に合わせたサイズを指定できるfit-content。無駄なタグを省くことができて、便利に使えるこのコードを私は見出しデザインで使用しています。今回はfit-contentについて実例つきで紹介していきます。 fit-contentで背景色 中央位置に配置した見出しに背景色をつけるスタイル。<h2>や<h3>などの見出しタグを親要素の中央の位置に配置しつつ、背景…
ロゴは、企業やブランドの顔となる重要な要素です。そのため、多くの方が慎重にデザインを選び、制作を依頼されています。 ロゴデザインの制作依頼をお考えの際、料金の違いに迷うことはありませんか？当方でも、制作内容に応じて9万円から30万円の範囲で承ることが多く、お客様のニーズに合わせてお見積をご用意しております。 このような料金差が生まれる理由についてご案内していきます。 ロゴデザイン制作にかかる「見え…
デザインの参考になるギャラリーサイト私が実際に活用しているデザインギャラリーサイトを厳選して8つご紹介します。 ザイナー視点はもちろん、クライアントが自社のデザインイメージを固める際にも役立ちます。デザインの方向性を大まかに決められることで、より良いデザインが生まれるきっかけになるので便利です。 ギャラリーサイトの活用について デザインギャラリーでの閲覧は、単なる模倣のためではなく、アイデアや発想…
CSSコーディングに役立つサービスやWebサイト運用で役立つSEO関連のツールなど、Web制作の現場で使えるWebサービスを13個紹介します。ワンクリックで取得できるコードや、ドラッグ&ドロップだけで完結するものなど、直感的に作業できるサービスばかりです。あなたの現場でもぜひ利用してみてください。 Fancy Border Radius Generator CSSのborder-radiu…
デザイン作成時に悩みがちな色選びを助けてくれる配色ツールを8つ紹介します。単なる色の組み合わせだけでなく、ウェブサイトやイラスト、モックアップなどのデザインにも適用して確認できるツールもあります。デザイナーに限らず、さまざまなビジネスシーンのデザインワーク時にもおすすめです。みなさんのデザインワークフローの効率化にお役立てください。 Happy Hues さまざまな配色を実際にウェブサイト上で確認…
円グラフをCSSで実装する方法です。画像より優れているのは後ほど編集する際CSSの値を偏光するだけと手間が省ける点です。運用の手間を考慮するならCSSでの円グラフをおすすめします。 中心から放射状にグラデーションするconic-gradientを利用して円グラフを表現していきます。 円グラフ内の割合は％で指定。例では、円グラフの起点0%から60％を赤#d5525f 0% 60%、60％から100％…
ページローディングのプログレスバーをCSSアニメーションで実装する方法です。少しのコードで表現できるので実装の手間はかからず予算少なめの案件でも提案しやすいのでおすすめです。 See the Pen Loading animation by MxGRAIN (@mxgrain) on CodePen. 疑似要素.opening::beforeでローディング時の背景（デモの場合黒背景）を表示します。…
ページ遷移の時にフェードインしながらコンテンツが表示されるアニメーションの実装です。遷移時に演出をつけたい、でも大げさなものは要らないという時にピッタリの表現です。 See the Pen Untitled by MxGRAIN (@mxgrain) on CodePen. ※右下の『Rerun』をクリックすると遷移アニメーションを確認できます。 animationアニメーションの設定は、3秒3s…
画像を横にスライドさせて一箇所で複数の画像を見せることができるカルーセルスライダー。複雑な機能を実装するにはjQueryが必要ですがシンプルなものであればCSSだけで実装することができます。 カルーセルの実際の動きを確認 デモを用意したのでご確認ください。 See the Pen CSS Carousel Slider by MxGRAIN (@mxgrain) on CodePen. コンテンツ…
CSSで実装できるシンプルな見出しデザインを21パターンご紹介します。汎用性が高くテイストに縛られず現場ですぐ使えるデザインなのでストックしておくと便利に使えます。あなたの現場でぜひご利用ください。 CSSのみで実装するシンプルな見出しデザイン21パターン 蛍光ペンのような線をひいたCSS見出しデザイン ラインを使ったCSS見出し HTML CSS 蛍光ペンで線を引いたような見出しデザインです。d…
デザイナーがウェブサイト制作を進める上で、発注者＝クライアント様から共有される情報は非常に大切です。企業の基本情報だけでなく、各ページに掲載する文章や写真、イラストなど、質の高いコンテンツ情報が必要となります。 しかし、実際にどのような資料を提供すればよいのか、迷うクライアント様も多いでしょう。 そこで本記事では、コーポレートサイト制作時にデザイナーに渡すことで制作がスムーズに進む「資料とその作成…
Webサイト上にデザインとして動画を活用する例は多くなってきました。クライアントからメインビジュアルや主要セクションに動画の設置を希望されることが増えてきて、需要があることは実感しています。 ただ、動画はファイルサイズが大きくなりがちで、扱いには注意が必要な要素でもあります。今回は、Webサイト上にデザインとして動画を設置するときに気をつけたいポイントについて7つ紹介します。 動画を設置する際に気…
Figmaをデザイン作成のメインアプリに変えてから数ヶ月経過し、Figmaプラグインの見直しをおこないました。新たに発見したもの含め、私が使い続けているプラグインを17個紹介します。 また、使用してみたものの使わなくなったプラグインも記事後半に紹介しています。私にスタイルに合わないだけで便利に使用できる方もいると思うので、ぜひ最後までチェックしてみてください。 Figmaプラグイン17選 まずは、…
Google Fontsは、約1500種類のフォント（執筆時点）を提供しているWebサービスで、イメージに合ったフォントを見つけるためには、多くの時間が必要です。 毎回フォントを探すたびに確認作業をするのは時間の無駄です。そこで、先日私はGoogle Fontsで提供されているすべてのフォントをチェックし、分類して自分用に整理しました。これにより、かなりの時短になったので共有します。 日々追加され…
Webデザイン制作中に使用している、コーディング後や納品時に確認すべき62項目のチェックリストを紹介します。 このチェックリストは、Webサイトの品質基準を定め、品質を維持することを目的としています。感覚的に確認すると見落としが発生する可能性が高いため、私は常にチェックリストを参照しながら確認しています。 また、このチェックリストを使用して表示確認を行い、それをクライアントに提出することで、安心感…
WordPressで最低限おこなっておきたいセキュリティ対策について紹介します。難しい設定はなくWordPress初心者向きの内容です。ただ、かならず対応しておきたいものばかりなので、WordPress実装の際にチェックすることをおすすめします。 01, WordPress本体やWordPressプラグイン、WordPressテーマの更新 WordPressの本体やプラグイン、テーマを最新状態に保…
<head>内で最低限設定しておきたいHTMLタグを紹介します。 ほぼすべてのサイトで使用するページメタデータから、SNS用のOGP設定、コーポレートサイトやブログ記事、パンくずリストの構造化データ（JSON-LD）のをメモ。 他に実務で使用したものが出てきたら、ここに追記していきます。 サイト全般 manifest.webmanifest内の記述 Android用pngアイコンマニフ…
Web制作の現場でよく使ってきたCSSのみで実装するボタンデザインを紹介します。hover時のスタイルも合わせて公開しているので、そのまま利用することができます。主に自分用のデザインストックとして投稿しますが皆さんも使えるボタンデザインがあるかもしれません。ぜひあなたの現場でもご活用ください。 背景色と矢印のボタン ボタンデザイン シンプルな矢印と背景色の組み合わせのボタンです。 justify-…
現場で使えるFlexboxレイアウトを12パターン紹介します。flexboxを紹介する記事はたくさんありますが、知識のみで実例付きで紹介されているページはあまり見かけなかったので、本記事にて詳しく紹介していきます。 flexboxに慣れていない方だけではなくコードを短縮化させたい方も対象の内容となっております。ぜひご一読ください。 flexboxを使った横並び1行レイアウト カードUIでよくある横…
