design

google フォームの更新通知

Googleフォームから送信された時に、メールで通知が来るようにする。 通知を受け取るアカウントでログイン ※共有相手の設定まではすることができない。 googleのスプレッドシートから設定する。スプレッドシート、ツールメニューから 通知ルールを選択する …

わかち書きとは何か

分かち書きの一例 文節で区切ること にほんごを ひらがなで ひょうきすると どこで くぎるのか わかりにくい。主に日本語初学者むけ、子供向けの文章を考える。 平仮名が続くと意味の区切りがわかりにくい にほんごをひらがなでひょうきするとどこでくぎるの…

ポスターなどの色の劣化の理由

日差しにさらされた、印刷物の青白く色あせるのは。 色の持つ性質による劣化 赤より"青"が強い 赤系は劣化しやすい・青系は劣化しにくい 窓先に見かける、"青白く色あせた"ポスター。こらは赤が劣化して青色が残った状態。 赤は青い光や紫外線を吸収し、赤を…

色覚障害への配慮

色覚障害での見え方・色による区別と濃淡による区別 制作画面での見え方 料理カードに入れる挿絵を制作 色の違いでどんな料理か区別をつけている Photoshopの色校正によるチェック Photoshopの色校正で、色覚1もしくは2型で校正表示する左2マイは、黄緑い山…

チラシ見てください → 見たくない から 見てみたいへ

チラシは、普通見ないし、内容を信じないし、もちろん行動もしない。 だって、自分に関係ないね、と思う。 チラシとは、「手に取られない」「読まれない」「行動しない」もの。。 これが普通の人の気持ち。作る側・発信する側も、個人に戻れば同じこと思うは…

Googleの日本語フォント notosans

Notofontのページ notofontをWebフォントで呼び出す <link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosansjapanese.css"> もしくは@import @import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css); 呼び出すものを覗いてみると・・・ スタイルシートに指定 body{ font-family: 'Noto Sans Japanese', ser</link>…

画像形式の特徴・使い道

主な画像形式のまとめ 画像形式 代表的なjpgとgifとpng・・・あとtiff 扱う色数・圧縮の方法・それによる向き不向き 形式 色と透過 圧縮 利点と不向き jpg フルカラー1760万色 圧縮したら戻せない 色数の多い写真やグラデーションの絵 gif 265色・透過・アニ…

フォントを使ってロゴを作成するのはOKか

ウェブページに表示するのはOKでも、印刷物や画像に埋め込むと権利を侵害することがある。 この場合の権利とは著作権ではなく、フォントごとの契約として使用できる範囲について。 英文はOK、和文は要確認。MacのヒラギノはOK ルフトハンザのロゴはヘルベチ…

フライヤー

完成したPDF 操作を覚える 新規作成 画像の位置・サイズ調整 テキストの位置・サイズ調整 線の位置・サイズ調整 同時に変更・繰り返し作成 新規作成 用紙サイズ:A5 見開き:なし 方向:縦 マージンサイズ:10mm ※画像では天地左右、これが見開きになると、天…

リーフレットを作る

垣根の高い印象のあったDTP。 同じAdobeのイラストレーターと、共通のショートカットやツールがあり応用できそうです。 基本操作を覚える 画面操作をマスターし、ロゴや画像を配置します 完成したPDF 画像の配置(Command + D) オプションのチェックを全て外…

3つ折りパンフレット

手が出せそうもないと思ってたDTP。 Adobeが提供するインデザインのチュートリアルでの、3つ折りのパンフレット作りです。 イラストレーターでは、ガイドを自分で作るけど、 インデザインでは、折り目など最初から出来上がりを想定して作っていけるんですね…

Google的であれ

1.人々に焦点を当てろ――彼らの生活、彼らの仕事、彼らの夢に 2.すべてはミリセカンド単位で数えろ 3.シンプルにすると強力になる 4.初心者ユーザーを引き込み、上級者ユーザーを魅了しろ 5.革新に挑め 6.世界に通用するデザインを 7.今日と明日のビジネスの…

マージンはどうでもいい

別にきまりなんかないそうです。 そろっている→ 整頓 バラバラ→ 開放 ページ物は、そろっている部分と、そろってない部分を持たせると、統一感&ページの差ができる。 有効につかう 空きによって印象が大幅に変わる。 ムダじゃない。 ただの空きじゃない。 今…

配色を考える

好きな色をカラーピッカーで選び、 そこから背景色とアクセントを考えてみました。 面の占める割合 基本色25% (割と広い) アクセント5% 背景色70% (かなり広い) 基本色→好きな色 印象から選びました 明度は低めにする 基本色は"濃い色" 白文字が乗ると文字…

サイトを制作していくとき、欠かせない14場面

(x)html+cssの安定したコーディング エラーをなくす→上位表示につながる 検証をする html5もxhtmlベースで作ると安定する テーマをわかりやすく見せる テーマに沿った、画像・図表を用意する。 デザイン先行。写真をくださいでは遅い。 デザインするべきこと…

ネットショップのプレゼン講評

たくさん感想をもらいましたので、気になった点をあげてみます。 ECサイトを作成してみて、注目された点、課題になった点。 よかったポイント 第一印象・全体的な印象 全体の統一感があって見やすかった 見やすい シンプルな中にも工夫が施され、とても見や…

SNSとHPサイトの強みくらべ

店舗もPRも活気に溢れるのが、販売時期。 でも、製造してる時・空白期間もつなげる、忘れられない存在になるために。 能力 SNS HP 個性 × ○ デザインの自由度 告知(広告) ○ × 発信・友達に確実に伝える 蓄積 × ○ 常設できる、タイムラインは流れる 拡散(ポス…

通販サイトの配置(PC)

心理変化順になっている でもかならずトップに「購入手続きボタン」を置く。 興味を引く タイトル 画像 関心・感心 説明 使用方法 買う人の背景に合わせる 買う人の心理 〃 購入 値段 送料 いつ届くか、など

モバイルサイトでのニーズ

テキスト志向→コンテンツ志向 コンテキストよりコンテンツへ。 反応が早く、画像も向いている。 手でさわるモバイル画面には、表示の大きさ と 余白 がひつよう。 ※ 要るものはなにか精査する。画面が小さい分、関係ないものはモバイルに向かない。

ニーズに答える

サイトを見るのは情報収集のため 悩み・ニーズを解決してあげる 知りたい情報がなければ離れる 自分さえ、から人のためにして役に立てる 自分の持ってる物はなに?出来ることはなに? 人のため 自分さえ ニーズに応える 売る先を探す お客さんの聞きたいこと…

WebのPDCAサイクルとは

Web制作で「ホームページつくること」は、運用として考えたとき、 作るまでの計画と、作ってからの見直し・修正が大きく比重を占める。 (それをうけてのデザインで、制作をする) どうして?どうやって?をいっぱい考える&考えてもらう作業。マーケティング再…

日と欧フォントの同じ文字サイズで違和感

和文と欧文のフォントの組み合わせでは、デフォルトを一緒につかうと大きさなどがあわない。 和文は大きく、欧文は小さく見える。 (ヒラギノだけ・メイリオだけならとりあえずOK そろってつくってあるから・・) イラレの合成フォント機能 書式→合成フォント …

サイト作成 はぎわら農場ウェブサイト

サイトのラフを描いてみる 掲載内容を書き出してリストにする 一緒に載せたい内容をグループにする プレゼン時の構成から、ページ構成を変更する。 構成が変わったので、ラフをもいっかい描く ページ毎に文章つくる(主題 説明 項目) サイト名の再考。"はぎわ…

こんなサイトにつくりたい -CSS NITE-

CSS NITEグリーンの他は白、ベージュ。 見出しがよくわかる程度に目立つ。ほかのフォントがグレーがかっているから。 見た目も、ソースの構造も簡潔。 ロゴ、hoverすると矢印がでるナビゲーション。かわいい。

サイトの構築 ウォンツケーキ

サイトの構築 ページ構成を図にする 各ページの、共通部分を作る。(見出し、ナビゲーション、サイドメニュー) 各ページ毎の、内容部分を作る。(コンテンツ) 自分めも。次は・・・ 構成をつかむ。図にするとき。サイトが大きくなるほど、全体と個別になる部…

ブログのカスタマイズ

サイドバーのタイトルに色を入れてはっきりさせる。 /*モジュールのタイトル hatena-moduletitle*/ div.hatena-module div.hatena-moduletitle{ color: #ffffff; background: silver; border-left: solid 20px #aaaaaa; } div.hatena-module div.hatena-modu…

検索の方法(課題61)

61 テレビ電話を売りたいが、相手は誰が良いでしょう? 携帯もパソコンも持ってる人に売る。そのガチャッと取れば使える単体機能をアピール。 車に搭載するため、自動車メーカーに売る。 商品を展示している、展示場のメーカーに売る。案内されずに見たいお…

webデザインにひつようなこと

Webデザインの勉強に必要なこと 見る側から作る側へ。 「文書構造」「画像の質」「時間的な効率」 100の理屈よりも1ページを作ること。 はてなブログ Jimdoのカスタマイズ Blogなどはカスタマイズすること。 CSSを子孫セレクタで指定。画像のパスを性格…

パラグラフとは

講義内容から パラグラフとは 一つのテーマを示すまとまり。見た目の文章のまとまりではない。 トピックセンテンツ→見出し パラグラフの内容を一言で表すもの 本文・段落 並列した重要度の文(番号なしリスト) 時系列の文、レシピとか(番号リスト) 論理構…

Illustratorの基本

イラストレーターとは 複製、コピペを利用した作業 「対称(シンメトリー)」を利用して「画面上の安定」 周りにあるモノの中にある「シンメトリー」を探す習慣。 そしてそれをシンボル化する作業を Illustratorでおこないます。 作業しやすい環境☆ 環境設定…