ただのワイヤーフレームと一歩差をつける！作成するときの10のコツ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、Webディレクターのなべちゃんです！ 今回はWebサイト制作では欠かせない、サイトの骨格である「ワイヤーフレーム」の作り方について、紹介していきたいと思います。 LIGではデザイナーがワイヤーフレームを作成することが多いのですが、今回は先輩ディレクターでありデザイナーでもあるほそさんにフィードバックをいただきながら作成していきました。 お客様にとって内容がわかりやすいのはもちろん、デザイナーにとってもデザインしやすいという観点でのフィードバックが、目から鱗の内容だったので、今回学びのアウトプットとしてまとめていきたいと思います！ そもそもワイヤーフレームとは 冒頭でチラッと書きましたが、サイトの骨格・情報の設計図のようなものです。 Webサイトを作成するときに、いざデザインをするとなると、この情報は必要なかった、この情報は入れてほしい、表示順を変えてほしいと出戻りが起こってしま
配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド｜Taiki IKEDA｜note
今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。 はじめるよ レイアウトに関してはルールに則って並べればオワ、オワリです。 1. メインカラーを選ぼう まずはじめにメインとなるカラーを決めます。Polipoliのテーマカラーはピンクなのでブラウザの検索欄に「pink flat ui design」と打ち込みます。イメージに近い色が出てきたらスポイトで吸い取りましょう。著作権にはくれぐれも注意してください責任は負いません。 Polipoliに関しては最初からメインカラーが決まっていたので「#E9546A」を使おうと思います。 2. アクセントカラーを選ぼう Coolors.coというサイトに
【見本あり】デザインカンプの作り方とコツを現役webデザイナーが解説 | これだけデザイン
未経験者からすると、デザインカンプはいわばあなたのデザインスキルをアピールする実績そのものです。 ポートフォリオに載せるものになるので、的外れなものを作りたくないですし、あわよくばいけてるデザインを作りたいですよね。 でもデザインカンプってどう作ればいいの？という方のために、 ゆーし 2ヶ月の独学で未経験から制作会社の webデザイナーに転職 半年間でwebデザインの副業案件10件を担当 現在Webデザイナー兼アートディレクターとしてデザイナーのクオリティ管理を担当 上記の経験を持つ僕が、実際に作った架空サイトを例にデザインカンプの作り方を解説していこうかと思います。 後半では、デザインカンプ制作のコツを述べていますので、最後まで是非ご覧ください。 こんな方におすすめ デザインカンプ制作に必要な事前準備 デザインカンプの制作手順 デザインカンプの制作のコツ 今回はある程度デザインソフトを使
ウェブサイト作成のよくある間違いと解決テクニックまとめ【保存版】
この記事では、ウェブサイトを作成するときによくある間違いを、具体的なサンプル例と解決テクニックと一緒にまとめています。 一般的なランディングページでありがちな間違い 1. コンテンツがブロックに分割されていない 論理的なブロッグにグループ化することで、ユーザーが情報を理解しやすくなります。パディングを120〜180pxに設定し、背景色を活用して文字テキストだけのコンテンツを分割することができます。 コンテンツ間のパディングはほとんどなく、コンテンツを分割するために背景色の利用が必要。結果として情報を要約するのがむずかしく、どこに何が書かれているのかわかりにくい（上） パディングを十分に確保し、ブロックごとに色で区切られており、どこまでがコンテンツに含まれるのかすぐ分かります（下） 2.Webページのアイテム間の余白スペース幅が不揃い 論理的に分割されたブロックの周りには、同じサイズのパディ
#27 アパレルブランドのSALEバナーデザイン制作｜Yuriさん｜未経験からWebデザイナーを育成｜Webデザイン1on1レッスンチャンネル
授業の概要 Yuriさんが作成したアパレルブランドのSALEバナーを、レビュー＆ブラッシュアップします。
事務スタッフ専門の派遣社員募集｜バナーデザイン｜レビュー＆ブラッシュアップ｜カトウヒカル
1on1レッスン生徒の授業にて、架空の題材「事務スタッフ専門の派遣社員募集バナー制作」のレビューとブラッシュアップを行いました。 １）お題 バナーデザインのお題は「事務スタッフ専門の派遣社員募集」、以下の依頼内容で制作をお願いしました。 ① ターゲット ・女性 ・30代 ---------- ② 雰囲気 ・シンプル ---------- ③ 配色 ・ピンク、イエロー ---------- ④ 文言 ・未経験歓迎 ・残業なし ・日給1.5万円 ・応募はこちら ・事務スタッフの転職はJIMUJIMU7 ２）レビュー 左側：生徒さん制作／右側：ヒカルのブラッシュアップ ◯ 良い点 ・シンプルにまとまっている ・視認性が高い △ 改善点 ・リズムが単調 ３）改善点：リズムが単調｜人物 斜めのアクセントは良い感じだけど、少し窮屈に感じてしまう。 窮屈さをなくす方法 ・人物を切り抜いて白背景側に重ねる
【それで大丈夫？】ポスターデザインの作り方とセオリー【素人～中級者向け】 | Blog ｜ デザインのコツ。
ポスターデザインで手が止まってる人向け。 「効果が出るポスターデザインの作り方を知りたい」 「ポスターを作ることになったけど、参考になるデザインを見たい」 「パワポで簡単にポスターデザインを作る方法を知りたい」 こういった悩みにお答えします。 ※この記事は3分ほどで読み終わります。 記事の前半は「デザイナー向け」、後半は「素人の方向け」になっています。 不要な部分はスキップOKです(｀･ω･´)ゞ 本記事の内容 １：【あるある】ポスターデザインが進まない原因とは。 ２：【実際に作ってみた】サクサクすすむ、ポスターデザインの作り方。 ３：【効果あり】ポスターの集客効果を高めるたった一つのコツ。 ４：【見て学ぶ】ポスターデザインの制作事例を紹介 ５：【アイデア収集】ポスターデザインの参考になるサイトを紹介。 ６：【素人でもできる】パワーポイントを使ったポスターデザインの方法。 ７：【デザイナー
Webデザインをする時のおさえたいポイントと注意点をまとめてみた | ずくろぐ
こんにちは！ちづみ(@098ra0209)です！私は今カンボジアにいながらこの記事を書いています。ノマドワーカーです。 今回はウェブデザインをする時のチェックすべき点と注意点を備忘録としてまとめてみましたので、よかったら活用してください( ^ω^ )
【かんたん】デザインカンプを作る前準備！カンプ作成で大事なことついてわかりやすく図解します！ - もぐもぐ食べるおいしいWebデザイン。 - もぐでざ
どうしてホームページを作るの？（サイト構築の背景）どんなお店や企業なの？（サイトタイプ）誰に見てもらいたいの？（顧客ターゲット）全部で何ページくらいだろう（サイト規模）目標はなに？（期待する効果）写真を提供してくれる？（準備いただける素材）どのくらい手間をかけられる？（ご予算とスケジュール）参考になるサイトは？（競合他社）パンフレットなどのデザイン展開予定はある？（弊社にご依頼予定のもの）…etc
【かんたん】デザインカンプの作り方、0から丁寧にわかりやすく図解します！ - もぐもぐ食べるおいしいWebデザイン。 - もぐでざ
参考サイトを見つけるヒアリングシートをもとに、お客さんの要望に添えるようなデザインを考えていきます。 ただ、無から有を生み出すのはよほどの玄人でないと無理なので、デザインまとめサイトなどで参考になりそうなサイトを見つけましょう。 おすすめのデザインまとめサイト SANKOU!カテゴリーの分け方が、基本（業種・色など）に加え、「ステキな下層ページあり」「キーカラーが効いてる配色」みたいなワクワクするものまである。 また、バナーデザイン・スマホ表示に特化した別サイトもあるのでアイデアの宝庫。
【後半】デザインで確実に覚えておきたい、20の基本原則まとめました。
海外デザインブログCanva Design School Blogで公開された「Design Elements and Pinciples」より許可をもらい、日本語抄訳しています。 初心者からベテランまで一度確認しておきたい、デザインの基本原則20個をまとめています。前半に続き今回は、残り10個のテクニックを見ていきましょう。 いつも何となく感覚で理解している内容を、体系的に学ぶことで、よりクリエイティブな今後のデザイン制作に活かすことができるでしょう。 詳細は以下から。 コンテンツ目次 前半パートとなる、# 1-10 のデザインテクニックは以下よりどうぞ。 デザインで確実に覚えておきたい、20の基本原則まとめました。 コントラスト 枠組み、フレーミング グリッド ランダム ディレクション ルール 動き 奥行き タイポグラフィ 構図 11. コントラストを利用しよう。 コントラスト（英:
現役デザイナーが明かす！デザインを良くする12個の鉄板ルールと具体例
海外デザインブログCanva Design School Blogで公開された「12 Ways Designers Know When a Design Looks Good – And How You Can Too」の著者より許可をもらい、まとめて日本語抄訳しています。 デザイナーではないひとにとって、デザイナーの行う作業を見ていると何をやっているのかよくわからないものかもしれません。どうやって利用するフォントを選んでいるのでしょう？なぜ素敵な色使いができるのでしょう？なぜこのイベントポスターは、こんなに興味をそそるのでしょう？ デザインには正解も間違いもないことが、はじめての人にとって、デザインを学ぶことがむずかしい理由のひとつかもしれません。 もし仕事場にグラフィックデザインを作成してくれるデザイナーがいるのなら、あなたは幸運でしょう。しかし私が最近話す機会のあった、何千とある中小
感覚派デザイナーも知っておいて損はない「デザインの要素と原則」 | WebNAUT
「あなたは感覚派デザイナー？それとも理論派デザイナー？」 このような質問をされると、理論派デザイナーだと答えたくなる理系出身デザイナーのタカハマです、こんにちは。 今回は、そんな理屈っぽい私の大好物である「デザインの要素と原則」をご紹介したいと思います。理論派デザイナーの方はもちろん、感覚派デザイナーの方も知っておいて損はないですよ！ 「デザインの要素と原則」はビジュアルデザイン全般に活用できる Webデザインに限らず、ビジュアルデザインの基礎を学ぶ上で、大変参考になる「デザインの原則」というものがあります。いわゆる「Design elements and principles（デザインの要素と原則）」や「Gestalt principles（ゲシュタルト原則）と言われる原則で、デザインの構成要素や要素同士の関係性が全体に与える影響をまとめたものになります。 調べてみると識者によって分類や
HP作成の初心者でワイヤーフレームの作り方をよく知らない人へ
本気でweb制作を仕事にしたいなら 現場で通用する実践的なスキルを身につけましょう。 【独学 vs スクール】メリットとデメリットを比べて、おすすめの学習方法もお伝えします。 続きはこちら 今回は、web制作時によくある悩み「ワイヤーフレームの作り方がわからない」を解決します。 意外に、ワイヤーフレームの作成方法を詳しく教えてもらう機会は少ないですよね。 そのため、以下のような悩みを抱える人が多くいます。 ワイヤーフレームが何かを知っているけど、いまいちうまくまとめられない。 ワイヤーフレームを作るときの手順が合っているかどうか自信がない。 webサイトの制作過程において、ワイヤーフレームの時点で失敗していると次の工程のデザインも絶対うまくまとまりません。 ワイヤーフレームは、家を建てるときの設計図と同じ役割をします。 適当に作った設計図をもとに家を建てたら、当然、住みにくく崩れやすいもの
全デザイナー要注目！美しいデザインの構図を決める10個の黄金ルールまとめ
海外デザインブログCanva Design School Blogで公開された「10 Rules of Composition All Designers Live By – Canva Design School」より許可をもらい、日本語抄訳しています。 どんなに美しいグラフィックデザインを利用したとしても、構図（英: Composition）が不十分だと、デザインの良さは消えてしまいます。 デザインの構成、組み立てはとても重要といえるでしょう。では、「構図（英: Composition）」とは一体なにを意味しているのでしょう。簡単にまとめると、各部分を集めて、または各部分が集まって全体を組み立てることを指します。デザインにおいては、利用しているフォント書体や画像イメージ、グラフィックデザイン、配色などを集めることで、まとまりのあるデザインを作成することを指します。 アレンジ、配置や揃え
これだけ守れば見やすくなるデザインの基礎
2019/04/18に株式会社gumi様で行ったデザイン講義のスライドです。 デザインとは何か？デザイナーは何を考えてデザインを作っているのか？ という話から、実際にデザインを評価・検討するための言葉を紹介しています。
デザインがしっくりこないときに試すこと10選【新米デザイナー向け】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
デザイナー兼踊り手のJona（＠jona_yawaraka）です。わたしはLIGブログに掲載されるアイキャッチ（ブログ記事の顔になる画像）、バナー、背景ジャック（大型バナー）など、さまざまな画像を製作してきました。 画像をつくって客観視したとき、「ある程度まとまってはいるんだけどなんだかしっくりこない。でも何が悪いかわからない……」ということありますよね。 わからないときはとにかく手を動かして、いろいろと試してみるとうまくいったりするもの。ということでデザインがしっくりこないときにとりあえず試したい10の簡単な方法を、私の経験を踏まえながら紹介いたします。 独学でつまずいていませんか？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【素人っぽいデザインを解消する｜かんたんデザイン術。】｜デザインのコツ。
一瞬でそれっぽくなるデザインの方法