拝啓、お客様。Webサイト制作のコストはここにかかります。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
令和ですね。こんにちは。バックエンドエンジニアのまさくにです。ゴールデンウィークで休んでいたら、シュワシュワと筋組織が融解し、「自然に帰ろう……自然に帰ろう……」と遺伝子に刻み込まれた内なる声が僕を光射す方へ誘いました。もはや社会復帰は難しいかもしれない。 さて。さてさて。 皆さま、いかがお過ごしですか。新しい期に入り、心機一転したい気持ちでしょうか。何ならアレですか。お持ちのWebサイトをリニューアルしたい、そんな気持ちをそろそろお持ちでしょうか。 失礼ながら、そのお気持ち、 たぶん5ヶ月、遅いです！ 仕事としてWebサイトの制作に携わってから、5年くらいが過ぎました。現在はバックエンドの作業を行いながら、TD（テクニカルディレクション）やPM（プロジェクトマネージャー）として、プロジェクトに関わることも増えてきています。その観点から言って、お客様と我々の間には「Web制作」の考え方にお
フォント選びに迷ったら見返したい、おすすめ定番フォント31選まとめ (欧文編)｜原田 佳樹 Harada Yoshiki
こんにちは！トライブグループという会社でCDOをやっています、原田佳樹 @yoshigorouu といいます。前回はこんな記事を書きました！ 今回の記事では、デザイナーが抑えておくべき定番欧文フォント31個(+おまけ)をまとめました。世の中で使われている大体のフォントをまとめてあるので、何かデザインするときの辞書的な感じになれば嬉しいです。 1. フォントの世界に魅入ったきっかけ私のデザイナーとしてのキャリアはスタートアップ歴が長いので、スキルセットがサービスデザインに寄っています。客観的に見てもグラフィカル領域(特にサービスロゴ)が弱く、それを強化したい気持ちは前からありました。 世の中にある様々なサービスロゴを見ていくと、大体のロゴはシンボル＋タイポグラフィで構成されています。なので、フォントについて多少なりとも詳しくなれば、ロゴ制作の半分は出来るのではと思うようになりました。 リサー
これだけ守れば見やすくなるデザインの基礎
2019/04/18に株式会社gumi様で行ったデザイン講義のスライドです。 デザインとは何か？デザイナーは何を考えてデザインを作っているのか？ という話から、実際にデザインを評価・検討するための言葉を紹介しています。 この 作品 は クリエイティブ・コモンズ 表示 - 改変禁止 4.0 国際 ライセンスの下に提供されています。 第二回「UIデザインをはじめよう」はこちら https://speakerdeck.com/kinakobooster/uidezainwohazimeyou 第三回「今日からできるUXデザイン」はこちら https://speakerdeck.com/kinakobooster/jin-ri-karadekiruuxdezain ※訪問講座のご案内※ あなたの会社に話しに行きます。料金表はこちら https://xemono.life/#/workwith/co
【photoshop】風景写真をイラスト・アニメ風に加工する｜ヱノプルギスの夜 / こころ動かす者
（2019.02.23に書いたブリコルールのブログ記事の引越しです） 写真をイラストっぽく使いたいなどの局面はいろいろありまして、備忘録も兼ねて。 会社の近所で撮影した写真をこんな感じでイラスト風にして、弊社のキャラクターと合わせてみました。まあまあアニメのワンシーンのようにも見えなくもない？？ 最近だと、アプリで簡単に写真をイラスト風に変換できるものもありますが、photoshopを使います。 ベースとなるレイヤーを作成・調整する もとの写真はこちらです。 なんの変哲もない、何年か前に撮ってフォルダの奥底で眠っていた写真ですが、空を抜きやすい写真を選ぶとよいです。 【イメージ】＞【色調補正】＞【HDRトーン…】を選択します。 他のサイトなどでもHDRトーンを使って紹介しているところは多いです。私もこれを使います。HDRトーンの正しい使い方は正直なところ自分はわかっていません…。調整がまと
フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと｜Pittan｜note
フロントエンドエンジニアとデザイナーさんは日々協力してプロダクトを作っていく関係にあります。デザイナーさんが作ってくれたものをエンジニアが素早く実現できるよう、いくつかエンジニアから意識してほしいことをまとめました。 なんでこんな話になったのか（前置きなので次の章まで飛ばしてOKです） デザイナーさんから「この画面をこんな風に作ってください」とXDやSketch、PSDなどいろいろな形で渡されることがあると思います。 僕の個人的な意見・経験ですが、いざ実装するぞとなったときに 「あれ…ここってどうしたらいいんだろう？」 と迷って作業のスピードが落ちてしまうことがとてもストレスに感じていました。できればノンストップでいきたいなあと思うわけです。 手が止まるたび、デザイナーさんに「ここってどうしたらいいですか？」と質問するのが何か新しい画面を作るときに必ず発生していました。 「（いつも聞いてる
【プロ直伝】ロゴ作りの8つのコツをわかりやすく事例解説！ | ベーコンさんの世界ブログ
デザイナーのベーコン（@dogdog464646）です この記事ではロゴやタイトル文字の作り方を説明していきます 初心者でもこれだけ押さえれば、まるでプロの作ったようなロゴを作ることができます このテクニックを応用していけば、「どうやって作るんだ！」と思っていた複雑なロゴも作れるようになっていくはずです ロゴだけじゃなくて、 ・本の表紙 ・ブログのアイキャッチ ・チラシ、ポスターのタイトル文字 にも応用できるようになっています 覚えておけば、仕事の資料作りにも、PTAのチラシづくりにも役立ちます そして、みなさんが再現できるようにフリーフォント限定でデザインを作っていきます！ ロゴを作るテクニック！ 実際にロゴを作りながら、様々なテクニックを紹介していきます 基本の形を整える この文字を基本に進めますね まず２行にして「かたまり感」を出していきましょう ロゴは「文字」から「絵」に変えるよう
新サイトのデザインをあのスーパー夫妻にやってもらったからちょっと見てよ٩(๑✹ᴗ✹๑)۶ | Biancaweblog（ウニログ）
突然ですが、皆さん、ブロガーっていうのは、フォロワーに有料noteを販売したり、スポンサーをしたりされたりっていう人のことだと思っていませんか？ 私は違うと思います。 収益に直結すること以外にもやりたいことや発信したいことがあって、影響力をこういう方向に使える人のことをブロガーっていうんじゃないでしょうか。↓ まぁその件はこれ以上触れないとして、今回は、そんな伝説のブロガーまなしばさんの株式会社クリモに、コーポレートで公開するサイトのデザインを依頼したので、その紹介をさせてください☆ 株式会社クリモって？ まなしばさんと、旦那様のナベさんの会社。 株式会社クリモ https://cremo.tokyo/ CREATE + REMOTE + EMOTION = CREMO です。かっこいい。 ツイッターのアカウント名から社名をとって、そもそもツイッターのアカウント名はドラクエ5のキャラクター
ダメダメだった大学生が、たった３ヶ月でデザイナーへと爆速成長！地道な「UI模写」で見つけた生きる道 | CAREER HACK
デザインにおいて全くの素人だった大学生が、ひたむきな自主学習で一躍、時の人に。春田雅貴さん（23）は、他社サービスのデザインを完コピ。自ら分析・発信し、話題となった。なぜ彼は泥臭い努力を？ そこにあったのは「社会とつながりたい」という強い意志だった。 なぜ、デザインの素人だった大学生が注目された？ デザイン界で、ちょっと名の知れた大学生インターンがいる。 それが春田雅貴さん（23）さんだ。彼は横浜国立大学・経営学部の大学4年生（2018年1月現在）。クラウド会計ソフトのfreee社でインターンのデザイナーとして働く。じつはつい１年前までデザインに関してまったく素人だった。 彼を有名にしたのが「UIトレース」という取り組み。 他社のWebサイト、ランディングページ（LP）、プロダクトにおけるUIをゼロから模倣（模写といってもいい？）。そのポイントをtwitterや、ブログで発信していったのだ
ランキングの設計はどうあるべきか？｜深津 貴之 (fladdict)
「発見性」の強化のために、noteにランキングやホットエントリーに類するものをつけたいと思っている。しかしランキングやホットエントリーは、世間で思われている以上にデリケートなUIであるため、その設計は慎重に行われなければならない。下手な設計は、サービスのカルチャーそのものを破壊しかねないためである。 以下は、ランキング設計のための忘備録。 PVランキングは収奪的な設計であるPVランキングを設計する場合、まず最初に意識すべきことがある。それは本質的に、PVランキングは収奪的な構造であることだ。 「収奪的」とは、勝者が全てを独占してしまうことを意味する。 基本的にランキングに上位のコンテンツは、ユーザーの注目を獲得する。つまり、PVのあるコンテンツはランキング上位となる。そして上位コンテンツはその露出によって、さらにPVを集めてしまう。 結果、PVランキングは少数のコンテンツにPV、フォロワー
コスメレビューは「語彙力がない」ほうが良い。コスメアプリで「評論より感動」を重視する20代女子の話と、可愛くないアイコンは「まとめる」の隠された意味。｜アプリマーケティング
コスメレビューは「語彙力がない」ほうが良い。コスメアプリで「評論より感動」を重視する20代女子の話と、可愛くないアイコンは「まとめる」の隠された意味。 メイクアプリ「LIPS」をよく使っている、スマホユーザー（22歳 女性 ※前回のTikTokと同じ人）に聞いた話をまとめました。 目次 １、LIPSで「コスメの評判」を調べる理由 ２、コスメのレビューは「語彙力がないほうが良い」 ３、評論よりも「これ良かった！」で肯定されたい ４、可愛くないアイコンを「フォルダにまとめる」理由 ５、LIPSから「通販とフリマ」につなげてほしい ６、アットコスメを"昭和のアプリ"と評した理由 ７、フリマを使ってると「定価でコスメが買えなくなる」 ８、中古コスメは「誰から買うか？」で抵抗感を薄める ９、美容アプリは「綺麗すぎない人」が宣伝すべき 10、コスメは「持っていてかわいいか？」も重要 11、LIPSの投
バッドデザイン賞を勝手にノミネートしてみた-2017年度版- - 酔いどれデザイン日誌 - Drunken Design Diary -
忙しい年の瀬ですが、皆さま如何お過ごしでしょうか。 さて、皆さんは「グッドデザイン賞はあるのにバッドデザイン賞が無いのはおかしい」という風に思ったことはありませんか？私は職業柄、日常生活で見かけた良いデザイン事例と悪いデザイン事例を写真に撮ってストックしているのですが、その中には「本当にこれギャグじゃないの？」というレベルのバッドデザインがあったりするんですよね。 良いものを良いと評価することも大切ですが、良くないものを無視するのは人類の進歩に大きな影を落としているような気さえします。ということで、勝手にアワード化してしまいました。2017と付いてますが、私が見つけたのが2017年だったというだけで製造年度などとの相関性はなく、特に意味はないです。あくまでジョークコンテンツとしてお楽しみください。 【追記】Twitterの方で一部画像が自分で撮影したものではないのでは？とご指摘頂きました。
「先輩のExcelグラフ、ダサいですね」とデザイナーが言ってきたので教えを請うたら恋が始まった
『Soldi』は、複数の企業と提携し情報を提供しており、当サイトを経由して商品への申込みがあった場合には、各企業から報酬を受け取ることがあります。ただし当サイト内のランキングや商品の評価に関して、提携の有無や支払いの有無が影響を及ぼすことはございません。また当サイトで得た収益は、サイトを訪れる皆様により役立つコンテンツを提供するために、情報の品質向上・ランキング精度の向上等に還元しております。 社内・社外向け問わず、資料作りで大活躍するのが Excelのグラフ。 Excelのデフォルト機能でさくっと作ったグラフでも結構いい感じに仕上がるので、「俺の資料、結構イケてるじゃん」と思っていました。 ところがある日の残業中、私が翌日の会議用資料の最終見直しをしていた時のことです。 私の後ろを通りかかったデザイナーのP子さんがぼそっとつぶやいた一言が、グサッと胸に刺さりました。 ※P子さんはこんな感
InVison(インビジョン)の使い方まとめ！デザインレビューが恐ろしいほど捗ります！ | 株式会社WEB企画
WEB企画では、デザインレビューの際に「InVision」というWebサービスを使っています。半年ほど前から試験的に使い始めた「inVision」ですが、使ってみるとかなり使い勝手がよくデザインチェックが短い時間で的確にできるようになりました。 今では手放せないツールの一つとなった「inVision」。今回はこのinVisionの便利な点と具体的な使い方についてご紹介したいと思います。 inVisionとは まずは簡単にinVisionについてにご説明。InVisionはアプリやホームページのプロトタイピングを複数人で効率的に作成することができるWebサービスです。 EvernoteやAirbnbといった有名企業もアプリ開発の際にこのinVisionを採用しているんだそうです。なんだかすごそうですね。 inVisionにデザインやワイヤーフレームをアップすることで、デザインに対してのコメン
フォントオタクなデザイナーが本気で選んだ「美しいフォント」24選【フリー＆有償】
『Soldi』は、複数の企業と提携し情報を提供しており、当サイトを経由して商品への申込みがあった場合には、各企業から報酬を受け取ることがあります。ただし当サイト内のランキングや商品の評価に関して、提携の有無や支払いの有無が影響を及ぼすことはございません。また当サイトで得た収益は、サイトを訪れる皆様により役立つコンテンツを提供するために、情報の品質向上・ランキング精度の向上等に還元しております。 名古屋の事業会社でデザイナーをやっているAkitaと申します。 プロのデザイナーとして、デザインで気にしているところは沢山ありますが、中でも一番こだわっているのは「フォント」です。 「フォントの選び方でデザイナーの実力が分かる」というのは、私が最初にデザインを教わった先輩の言葉でした。 世の中にはどんどんクオリティが高く、美しいフォントが登場しています。 広告・パッケージではやはり有償フォントが目立
Webデザインのスタイルガイドの作り方
Webサイトの制作はどんどん複雑化しており、１人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。 異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意するのはとても有効です。また、今後の開発やサードパーティ製品が生まれた際も、ブランドのガイドラインに沿い、ブランドの一部として知覚されるようにやすくなるでしょう。 Luke Clum氏は、Webデザインの第一歩としてスタイルガイドを利用することについて、昨年簡単に紹介をしました。この記事で
ダサいから良いと思ってたサイトデザインを、プロに頼んだ結果→ｃｖのために大事なのは○○ | Biancaweblog（ウニログ）
ビアンカ・ウェブ 2015年1月に法人設立、2児の母。 おもに、美容関係のアフィリエイトサイトを運営しています。 本年1発目のブログ更新！ 最近、公開サイト２つのデザインを発注したのですが、今回はそのお話です。 前置きはいらねえ、さっそくいってみよー！！ デザインを発注したきっかけ コスメディナの方はね、まあもとから、そのうちデザイン良くしようかなって思ってたんですよ。 でも、脱毛サイトの方は、実はデザインを変えるつもりは元々はありませんでした。 なぜかというと、それで収益が出ていたし、私の中の仮説で、このサイトは素人っぽいこそいいと思っていたから。 脱毛なんて思いっきり女性向けジャンルで、デザインがきれいなサイトにするのが鉄板だとは思います。 ただ、うちのサイトの場合、「ごく普通の一女性が、いろいろサロンに行ってみて書いてるサイト（というかブログ）」っていうスタンスで、バーグさんにも、「
数千ページのワイヤーフレームを書いてきたWebディレクターがUI設計時に気を付けている８つのこと。 - 笑顔を創りたいWebディレクターの日常
なんかすごい思い付きで www.adventar.org に参加してみたんですけども。 気づいたらいつの間にか自分の日になっていて面倒くさくなってきて激しく後悔したびっくりしたという。 ぼくはWebディレクターでありデザイナーさんではないし、すてきデザインができるようなビジュアルセンスのようなものは、誠に残念ながら母上から授けられずにこの世に生を受けているものですから、"いわゆる"デザインはやらないんですが、その前の画面設計についてはワイヤーフレームなるものでいっつもやっておりますので、その観点からなんか書きましょうとそういうことですお母様（謎） そんなわけで、うぇぶぎょうかいのむめいでぃれくたーのお時間です。 Webディレクターとしてはえーと、もうすぐ丸１２年になります。そうするとまあ、たぶん数千ページは「ワイヤーフレーム」をつくってきたんじゃないかと思います。正確な数字はわかんないです
全ての人が知っておくべきデザイン・レイアウトの基本ルールとテクニック15選 - LITERALLY
デザイナーでなくとも、デザインについてのいくつかのルールを知っておくと、日々の生活で何かと役に立つ。今回は、誰もが知っておくべきデザインの基本原則・テクニックを紹介する。 1.デザインの基本原則を覚えよう 1-1.「1/3ルール」を覚えよう レイアウトや写真の構成を考えるときには、黄金比*1よりも「1/3の法則」が便利だ。上の図のように、全体を9等分割したとき、各線の交点（図の丸点）に主張したいモノを配置するようにする。これだけで、不思議とスッキリとしたデザインになる。技の1つとして覚えておこう。 1-2.端をそろえて線をつくろう 写真や文などの「要素の端」をきちんとそろえると、きれいに整理されて見える。これはデザインにおいてとくに重要な基本ルールだ。全てをそろえる必要はないが、縦にいくつか要素を並べる場合は常に意識しよう。 1-3.視線の流れを意識したデザインにしよう 情報がたくさん詰め
コピペで使えるオシャレな配色パターン見本 25 （全組み合わせWebカラーコード付） - LITERALLY
今回はひたすら配色パターンを紹介していく。探しやすいように色ごとに分け、使いやすいように解説とWebコードも合わせて紹介する。プレゼン資料、Webデザインなどで目的に合った配色をそのままコピペして使って頂ければと思う。 ▼ 目次 カラフルな配色パターン 橙系の配色パターン 青系の配色パターン 緑系の配色パターン 黄色系の配色パターン 赤系の配色パターン 高級感を表現する配色 わび・さびを表現する和風配色 シンプルに格好良いグレーの配色 カラフルな配色パターン 1. 淡い「カラフル」 ■ #FF7D7D ■ #FFD580 ■ #B3E2B4 ■ #ABE7FF ■ #B8B2EA ■ #DBDBDB 淡いカラフルな配色は、白の背景に合わせると「透明感」を出すのに効果的。カラフル系の配色は扱いづらいので、上のコードをそのままコピペして使って頂くのが良いかと思う。 2. 力強い「カラフル」 ■
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
travelbanana.net
