バナートレース008/100

見本・トレース 見本 トレース 所感 全体的にシンプルで内容がしっかり伝わるバナーだと思った。 ロゴ「キミハツ」とキャッチ「働くキミをハツラツに」の幅が揃っていて、バランスが取れている。→ 幅を揃えるために、文字幅を広げるのは有効。→ 幅を広げるこ…

【Bootstrap】orderクラスで列の入れ替えして表示順を変える。

モバイルからみた時に、画像とボタンの表示順を入れ替えたくて調べてみました。 参考 とてもわかりやすかったです。。!感謝! 【Bootstrap4】グリッドレイアウト(並べ替え) – niwaka-web そもそもサイズの概念がわかってなさすぎることに気づき、こちらで…

スクロールするとヘッダー/ナビゲーションにシャドウがつく

スクロールするとヘッダー/ナビゲーションバーにボックスシャドウがつくのを取り入れたくて、散々調べたところ理想のソースコードを発見しました。感謝! イメージ 実際の技術は違うかもですが、こういう感じです。 zozotown http://zozo.jp/ slack よりシー…

メールフォーム/コンタクトフォームを作りました

仕事でメールフォーム/コンタクトフォームのデザインと、HTML・CSSのコーディングを行なったので、その時に調べたことなど色々メモします。 リサーチ 入力項目名前、メールアドレス、お問い合わせ内容 など。 入力項目の名称、順番名前を入力させるところの…

HTMLメールを作りました

HTMLメールのデザイン、HTML/CSSコーディングが終わりました! 1、2年前に自分でコーディングしてHTMLメールを作成したことがあるのですが、それ以外はメール配信サービスを使ってHTMLメールをカンタンにつくる作業ばかりしていたので、今回調べて勉強にな…

【background】スマホで見た時にCSSで指定した背景画像が反映されない原因 など

backgroundプロパティとは backgroundは、背景に関する指定を行うプロパティです。 背景に、色をつけて透過した画像も中央に1つだけ表示して固定表示にしたいなあ。というとき、 background-color: #000; background-image: url(bg.png); bakcgounr-positio…

sourth treeの使い方メモ

web

基本的な使い方は引き続きこちらを参考にしながら、ちゃんと理解するためにブログにもメモします。随時更新します。 backlog.com プル 他の人が更新した内容を自分のローカルリポジトリに反映させる場合「プル」を使います。 backlog.com リンク先参照の通り…

暗い写真をふんわり美白加工にする

今まで暗い写真はレベル補正で一生懸命調整していたのですが、この方法で暗闇で撮った写真が明るく生まれ変わったのでメモします。感謝! blog.creativeflake.com 今度適当な写真でビフォーアフターを載せようと思います!

Googleマップをおしゃれにする

Googleマップをおしゃれにしてくださいと言われたので、色々調べてやってみました。2回目以降はスムーズにできるよう参考にしたサイトやメモをまとめます。 Google APIキーの発行について Googleマップをカスタムして設置するにはAPIキーが必要です。 こち…

プライバシーポリシーページのデザインを集めて見ました

順不同です、コメントとかも載せていく予定です。 Google https://policies.google.com/privacy?hl=ja Facebook www.facebook.com Twitter Twitterプライバシーポリシー Amazon.co.jp Amazon.co.jp ヘルプ: Amazon.co.jp プライバシー規約 cotree cotree.co …

バナートレース012/100

「似たような素材が見つからない」と先輩に相談したところ、「夏の前っぽい写真を探せば?」と言ってもらったのでやってみました。 見本・トレース 所感 女性を切り抜いて新しく背景を作ろうと思ったのですが、大変だったのでキラキラを足しました。 柔らか…

バナートレース011/100

見本・トレース 所感 背景は青色のグラデーションにしたが、並べてみるとグラデーションが甘かった。右上をもうちょっと明るく。 「爆速」下の「Word Press」の行間をもっと詰めた方が良かった。 「体感せよ」のボタンの角度が大きすぎた。 文字の縦はちゃん…

バナートレース010/100

ちょこちょこ勉強は進めていたのですが、インプットばかりだったので、久々にバナートレースをしました。 見本・トレース 4回修正しました 出来上がってブログに載せようと画像をアップロードしたのですが、見れば見るほど気になる部分が出てきたので、結局…

最近のこと

ブログへの投稿が久しぶりになってしまいました。 最近、もっぱらコーディングができていなかったので、忘れないように、そして新しい技術を学ぼうと、コーディングを1日最低60分やっています。 こちらで勉強しています CSSグリッドレイアウト デザインブッ…

バナートレース009/100

見本/トレース ←見本 トレース→ 斜めストライプが見本より太目になってしまいました。 「最大39%」も、見本の方が白い領域が多かったです。 初めてやったこと 斜めストライプのレイヤーを重ねる 斜めストライプが重なっていることに気づいて、もっとやり…

バナートレース008/100

見本 色合いが気に入ったのと、「SALE」の文字の一部の色を変える方法が知りたかったので、このバナーをトレースすることにしました。 トレース トレースしたバナーがこちらです。 縦を揃えルことを意識して、文字サイズなどを調整しました。ポイント10倍の…

DailyUI #008 404 page

8日目のお題は「404 page」でした。 これは写真を見たときに、思いついたデザインです。外国のWEBサイトだと「 Oops!」って表記されるみたいで、それを真似してみました。 めちゃくちゃ写真頼みですが、見た目は自分好みになりました。でも今思うと影の色と…

DailyUI #007 Settings

仕事、体調不良で、間があいてしまいましたが、7日目のお題に挑戦しました。お題は「設定画面」でした。 色々考えたのですが勉強のために、TravelNowの設定画面をトレースすることにしました。 トレース 一部のアイコンは自分でパスを引いて作りました。 気…

DailyUI #006 User Profile

6日目のお題は「ユーザープロフィール」でした。 アップロードした写真の中でどこからしらのパーツに限定してがっつり切り取り、そこから色を抽出してbackgroundの色を設定してくれたらな〜という妄想のもと、つくりました。 反省点 わたしは、人のプロフィ…

Illustratorにとにかく慣れたい土曜日

Illustratorのチュートリアルをやってみました。 パスをひかずに「マル」「シカク」「多角形」「角丸四角形」を変形してアイコンをつくっちゃうよ、という内容で、難しくなくて苦手感が少しなくなりました。たのしかったです。 helpx.adobe.com 練習の様子 …

DailyUI #005 App Icon

DailyUIも5日目。DailyUIをやっていたらいつのまにか梅雨が開けました。暑すぎ。 5日目のお題はアプリのアイコンでした。アイコンのサイズはこちらを参考にし、180*180でつくることにしました。 qiita.com そして、完成品がこちらです。 2つのアイコンを作…

DailyUI #004 Calculator

4回目のお題は「電卓」! よく電卓を叩いてる人に、電卓アプリで困ることある?ときいたら、「00とか000がほしい。」「iphoneアプリの電卓は文字サイズが変わるのが嫌」という意見をもらいました。 確かに自分も、0を2回押すのが嫌だなと思っていたので、「0…

DailyUI #003 Landing Page (above the fold)

3回目のお題は「ランディングページのファーストビュー」。 どういうサイトにしようかな。。と悩んだのですが、本屋さん「BK」のWEBサイトにしました。ランディングページも兼ねているかんじです。 メニューの「Who are you?」と、一番下にある「じぶんのこ…

DailyUI #002 Credit Card Checkout

2つ目のお題は「Credit Card Checkout」でした。 今日めちゃくちゃお酒を飲みたかったのですが、ダイエットのために我慢することにしたので、お酒を配達してくれるアプリのクレジット決済画面にしてみました。 コンセプト 好きなお酒を選んで注文したら配達…

DailyUI #001 サインアップ画面

最初のお題は「サインアップ画面」でした。 こんなアプリがあったらいいなあというところから考えて作ってみました。 コンセプト アプリの名前は「tripper」。 一人旅がすきな女性向けです。おすすめの旅スポットの紹介、レビュー投稿、ホテル・ゲストハウス…

DailyUIはじめました。

ちょくちょくTwitterのタイムラインで流れてくる#DailyUIというタグってなんなんだろう?とずっと疑問だったのですが、ようやく理解しました! www.dailyui.co DailyUIにメールアドレスを登録すると、100日間毎日UIデザインのお題が届きます。(土日は配信…

バナートレース007/100

300*250サイズのトレースをやってきましたが、他サイズのバナーデザインが苦手なので、他のサイズのトレースもはじめていきます。 見本/トレース 考察 「得サブ」の上下の文字は潰れていたので再現できなかった。そもそも文字サイズが小さいので超高画質でも…

バナートレース006/100

見本/トレース 考察 右下の男性の背景が白っぽいので、中央の白の帯が目立たなくなってしまった。写真を入れ替えるといい感じになった。 「独立したいエンジニアに朗報!」というテキスト、一字ずつ右上に配置されていて、文字自体は若干斜めになっている。…

トレース09

対象サイト LINE Payさんのキャンペーンサイトをトレースしました。スマホサイトです。 10yenpingpong.line.me 見本 トレースしました ※注意事項は省略してトレースしました。※XDを使用しました。 考察 スマホで見たときに最適な文字数、文字サイズ、改行に…

バナートレース005/100

見本/トレース 考察 ネイビーとゴールドの組み合わせは高級感がある。 アイコンとテキストの部分は、隣同士のマージンが少ないため若干読みづらさを感じる。 「美術展・イベントなど」の文字数が多く他2つに比べて幅がある。「各種イベントなど」にすると3…