Sharena's sparkle
MENU

DESIGN and SUPPORT@Osaka

DESIGN and SUPPORT@Osaka

モチこと-For creation, motif and words- | Webサイト制作

モチこと-For creation, motif and words- | Webサイト制作

自主制作サイトです。

サイト名の「モチこと」は、「モチーフ」と「言葉」を組み合わせた造語です。

自分がデザインの仕事をする上で「こんなサイトあったら良いな」と思ったものを形にしました。例えば、ロゴデザインの提案をする際に、或るモチーフを選んだ理由を説明したいけど、しっくりくる言葉が見つからない。説得力のある提案をしたい。といったことがあります。そんなとき、モチーフのイメージやそれを表現する言葉(四字熟語・ことわざ・慣用句など)を探しやすい、デザインの観点から言葉をまとめたサイトがあれば便利だと思ったのです。

デザインについて

このサイトは、デザイナーさんやクリエイターさんにご利用いただくことを想定しているので、発想や創造の邪魔になるような凝った装飾は必要ないと考えました。機能面での必要最低限のデザインとして、落ち着いた印象のディープトーンの色を5色使いました。「モチーフ」は赤、「イメージ」は黄色といったように、内容ごとに色分けしています。

パソコン表示では、メニューを左側に固定表示しています。メニューの表示場所は、ヘッダー(上部)が一般的ですが、今回のサイトではヘッダーで大きく見せたい画像も無く、ユーザーの利便性や回遊率アップを期待してこのレイアウトになりました。

複数のコンテンツが含まれるページでは、ページ上部に目次としてページ内リンクを設置しています。事前にどんなコンテンツがあるか提示することで、ユーザーが目的のコンテンツに辿り着きやすくなります。

コーディングについて

WordPressのオリジナルテーマを制作しました。

(ロゴショップの画像を除いた)アイコン等の画像は全てSVG形式なので、JPEGやPNGなどのラスター画像に比べてファイルサイズが小さく、かつ遅延読み込みも設定して表示速度の短縮を図っています。

ちなみに、こちらのサイトで初めてアフィリエイトに挑戦したのですが、まだ一円も収益は発生していません(クリックはされるんだけど)。今後もコツコツ改善していきます。

モチことについて

モチことは、デザインの観点から言葉(四字熟語・ことわざ)をまとめたWebサイトです。

例えば、モチーフは決まっているけれど、そのモチーフを選んだ理由をうまく説明できないときは「モチーフで探す」。そのモチーフのイメージや、それを表現するための言葉が載っています。ネーミングなどの参考になるよう、モチーフの外国語も紹介しています。

また、イメージは決まっているけれど、具体的なモチーフが決まっていないときは「イメージで探す」。そのイメージの言葉を持つモチーフを一覧で確認して、検討できます。

  • 説得力のあるプレゼンをしたい
  • ふわっとしたイメージで困っている
  • デザインのアイデアを探したい

そんなデザイナーさん、クリエイターさんの発想・創造のお役に立てれば幸いです。

私自身もこのサイトを活用して、言葉(四字熟語・ことわざ)からインスピレーションを得て作成したロゴを販売しています。

モチこと-For creation, motif and words-
https://moti-koto.com/

※記事の内容は制作当時のもので、最新の情報と異なる場合があるため、必要に応じてご確認ください。

OTHERS

OTHERS

その他の制作実績はこちらからご覧ください。