WEB編集①アプリcrayonでサイトとブログのレイアウト編集

2020年04月01日 22:40
カテゴリ:creative

3月31日(火)レイアウトを変えました。
今回はcrayonの編集のサイト構成をお話ししたいかと思います。

そもそもcrayonとは

スマホ・タブレットに特化したホームページ作成アプリです。日本の企業が経営してるので、何かあったときも安心です
以下が良い点

ページの作成・更新が簡単
おしゃれなテンプレートが豊富
デザインをある程度カスタマイズができる
コンテンツの更新が簡単
スマホ・タブレットだけで作成可能
ECサイトが簡単にできる

アプリcrayonのデフォルトデザイン

・ベースカラー
全てにおいてのベースカラーがここで設定できます。理想なカラーをここから一つ選んで、後はサイトを編集する際にパーツ毎にレイアウト(色、大きさ)を編集すれば良いと思います。(現在15種類)

・ヘッダー
サイト名か、ロゴ(画像)にするかを選んで背景色を選択できます。

・メニューリスト
帯かトグルか選びます。
帯=スクロールしても帯上で表記されます。編集はバーのカラー、マウスオーバーの編集ができます(サイズは変更不可)
トグル=PC上では左固定表記、スマホは折りたたんで右上にアイコン表記されます。(スライドしてもついてきます)ただし、カラーは変更不可

・背景
ページの背景と余白(ページ外)の色を選択できます。

・フッター
SNSのアイコン(リンク)作成、住所(地図可能)表示、電話番号(リンクも可)、コピーライトの設定ができます。
文字のカラー全体の背景色も設定できます。

ブログの基本的なレイアウト

超簡単な構成として、

ヘッダー(+ナビ)→なんのサイトか表記する。併せて付箋箇所のようにページ移動ができるように設定すると良い

メイン→サイトのメイン部分。ここに書きたいことを書く。

フッター→連絡先、企業(個人)紹介

他者様のBlogを参考にしてレイアウトを変更しました

折角だから個性の出たホームページにしようと思ってたのですが、総じて見にくいと言うところと人を選びそうなカラーリングになってしまったので、他の方のBlogやサイトを見て再編成しました。

他者様のBlogを見て回って出た結論がこちらです

・圧倒的に白を使ったサイトが多い
清潔感と万人受け、画像等と組み合わせやすい

・TOPでリンクを詰め込む→何を見るか決まる
1番最初のページに整列されて、内容が組み込まれてたら選ぶの楽でした。

・写真、映像を重くない程度に入れて見やすくする
サイト全体のカラーだけでなく、個性を出すなら装飾である画像等で他サイトと分別化するのがいいかもしれません。

・見やすさを優先している
自分語りだけでなく見やすいサイトは相手側も気にしながら、編集・改行がしっかりされています

このことを踏まえて、以下のことを変更しました。

・HomeとBlog TOPの合併

・カラーリング変更

・タイトル名の変更

・戦地垂迹、YouTubeは公開次第Blog投稿する為、詳細を削除

ページの合併


Home画面とBlog TOPのサイトページを合併しました。

最初の画面で各場所に飛べるようにするのが理想かなと思い、以下の事を取り入れつつ作成しました。

・見てもらいたい記事
・最新の記事
・分類別のタグ
・宣伝したいリンク先
・Profileの設置

カラーの変更


カラーも藤モチーフに近い紫色にしてたとのですが、
シンプルなカラーの白に変更。
(紫色自体は悪くないのですが好き嫌い分かれるかなと思うので)
これで、画像との相性や組み合わせの難易度が減ったかと思います。
特に何の画像とも合わせようと思うと、白色背景に黒字か、黒色背景に白字が良いそうですね。
(黒色背景は文字色には注意が必要です)

タイトル名を英字に変更


ちょっと遊んでるのですが、

タイトルを英字に変えました。

日本語ばかりのサイトはおしゃれ感が半減されていたので

タイトルにだけメリハリつけました。

ガラッと変わった

まだまだ完成とは言えませんが、

割と白も悪くないと思ってます。ページも合併したことにより、編集する側は編集しやすいです。

暫くはこのサイト体制でいきたいと思います。

また、なにか良さそうなレイアウトがあったらチマチマ改善していきます!

お疲れ様でした!

記事一覧を見る

powered by crayon(クレヨン)