上記のタグで対応できない場合に「divタグ」というものがあります。学習を始めたうちは、どのタグを使えば良いのかわからずに、ついつい「divタグ」を多用しがちですが、「html5の主要タグ」を簡単に見ておくと良いでしょう。では、「divタグ」の説明を始めましょう。 定義 「divタグ」は、特別な意味が与えられていないタグです。つまり、「用途を決めていないため、制作者の判断で名前をつけて良い」タグです。無色のタグで、検索エンジンに明確な目的を伝えることもしませんが、ページのデザイン上、この自由度がどうしても必要となります。 目的 制作をすすめると、決まったタグだけを使ってサイトを作るのは難しく、ページの構造をわかりやすく見せるには、既にあるタグをまとめあげた上で、いくつかのブロックからなるグループを作った方が分かりやすいのです。 「divタグ」は、要素を自由にまとめ、ブロックとして認識させるこ

9月も終わり、2018年も残り３ヶ月。 今月もさまざまなサービスやアプリがリリースされました。 というわけで、今回もSNSやメディアで話題になったサービスをいくつかピックアップしました！ 【過去の記事はこちら】 » 【最新】話題のWebサービス・アプリまとめ ニッポンの名字 日本郵便が公開した、名字について教えてくれるサイト。 9月19日、名字の日に公開され、SNSで話題になりました。 気になる名字を入れて検索すると、「全国に何人いるのか」「どの都道府県に多いのか」「名字の由来」を教えてくれます。 名字について教えてくれるサイトは他にもありましたが、日本郵便が公式で公開しており、ユニークなイラストもあいまって、多くの人が利用しました。 Cocoda! オンラインのデザイン学習サービス。 カリキュラムに沿って学んでいくというスタイルではなく、架空の依頼内容に対して、ユーザー自らが考えてデザイ

※この記事は、2013年1月30日に公開された記事を再編集したものです。 何かで立ち止まったり、行き詰まったりした時は「驚き」や「新しいアイデア」を得た時に、急に閃いて解決することがあります。 今回は、Webデザイナーである私が、普段から巡回しているインスピレーションを得られるおしゃれなWebサイトがのっているギャラリーサイトを集めてみました。 アイデアの参考にだけでなくチームやクライアントとのイメージ共有にもギャラリーサイトを活用することで、より円滑にコミュニケーションがとれたりします。 気に入ったギャラリーサイトがあれば、ブックマークしておきましょう！ ※できるだけ直近でも更新されているギャラリーサイトのみピックアップしていますが、もし更新がとまっているサイトがあればご了承ください。 Web Design Clip | Webデザインクリップ 国内がメインで掲載されています。 特徴的な

※この記事は、2015年4月15日に公開された記事を再編集したものです。 世の中には、物事を美しく魅せるための「比率」が存在します。 建築や、Webデザイン、通常のデザインなど「なんだか綺麗」と思わせなけらばいけない場面で利用されるこれらの比率。具体的には黄金比、白銀比、青銅比、白金比、第二黄金比など、利用される比率は複数存在します。 そこで今回は、その中でもよく使われる黄金比・白銀比を簡単に、自動で計算してくれる便利なサービスを5つ選んでみました。 黄金比とは 黄金比とは、「Golden Ratio」の日本語訳で、1：1.618という人間にとって最も安定し、美しく感じられる比率のことです。 正方形の一辺にその約60％分の長方形を足した時、自然とバランスが取れていると感じることができます。名刺などの縦横比もほぼ黄金比で構成されており、有名なものをあげると、パルテノン神殿、モナ・リザ、ミロの

※この記事は、2013年2月05日に公開された記事を再編集したものです。 こんにちは。creive編集部です。 今回は、スマートフォンサイトやアプリをデザインするときに参考にしたい、ギャラリーサイトを紹介します。 iPhoneデザインボックス 国内のスマートフォンサイトが中心のデザインギャラリーサイト。 このサイトの特徴は、スマホ表示とPC表示の画面がそれぞれ紹介されているので比較することができることです。 それぞれでどのように表示を出し分けているかも一目瞭然！ http://design.web-hon.com/ sps collection 国内、海外問わず紹介されています。 ジャンルごとや色などから細かく検索できるので、探したいイメージのサイトを見つけやすいです。 会員登録なしでブックマークしておけるのも気軽で便利です。 https://spscollection.com/ Resp

「Webサイトや記事、プレゼン資料などできれいな画像や写真を使用したい」 と思ったときに真っ先に思い浮かぶのはフリー画像や写真素材ですよね。 画像や写真は見た人の印象にも残りやすく、デザインを洗練させる役割も大きいものです。 またブログやメディアではアイキャッチにこだわることで、記事を読んでもらうきっかけを作りやすくなります。 一方で、イメージに合った画像を探すことはどうしても時間をとられがちです。 また、フリー素材を使用するには、利用規約を読むのが難しかったり、商用利用は大丈夫なのか確認したりと大変な作業が多いです。 そこで今回は、国内外問わず、無料かつ商用利用も可能な写真＆画像素材が見つかるフリー画像、素材サイトをまとめてみました。 全て商用利用可能で、クレジット表記や改変が可能かも分かりやすく記載しています。 この記事を読めば、数多くのフリー画像サイトの中から、できるだけ最短でイメー

この記事は、IT系企業に勤めている「サービス作りに関わる人」に向けて、必ず追っておくべき第一線で活躍されている日本人デザイナーをまとめたものです。 デザイナーだけでなく、全職種の方に知ってもらいたいので、デザインのイロハというよりも「ユーザー、事業やサービス、組織に対してどのようにデザインで価値を提供するのか」を常に考え、実践・発信している方々を中心にピックアップさせていただきます。 前提として、「今のデザインがどういう文脈の上にいるのか」ということについて、少し解説を挟みます。 この辺りに明るい方は読み飛ばしてください。 デザインと一口に言ってもその領域は多岐にわたっており、UIデザイン・UXデザイン・グラフィックデザイン・プロダクトデザイン・サービスデザイン・インタラクションデザインなど、IT系でよく使われるものだけでも色々なデザインが存在し、デザイナーに求められる範囲が非常に広くなっ

creive(クリーブ)の「Sketch」についての投稿一覧です。

はじめまして。デジタルを軸にしたクリエイティブ・エージェンシーPARK Inc.のアートディレクターの佐々木智也（@tomosasaki）と申します。 昨今、ロゴを取り巻く環境は大きく変わりつつあります。日々誕生するスマートフォンアプリやWEBサービスの台頭によって、ロゴをつくる機会は確実に増えてきています。 特にWEBデザイナーの方は、WEBサイトやアプリのUIデザインの延長上でロゴをつくることになり、戸惑うことも少なくないのではないでしょうか？ 今日は、ロゴのデザインに強みや専門性をもっているデザイナーがどのようにロゴをつくっているかを紹介していきます。これでもう、ロゴデザインを恐れることはない、かもしれません。 ロゴデザインにおける大切なポイントをおさえよう なぜロゴが必要なのか？ まずはそこから考えてみましょう。 企業や商品をはじめ、アプリやサービスには、かならず強みや他と違う魅力

WordPressでサイトを作るときに、参考になるWordpressサイトはないものかと思ったことが一度はあるはずです。 WordPressでつくられたサイトからはデザイン・機能・運営方法まで参考になることが多いのではないでしょうか。そこで今回はWordpressでつくられたサイトを有名なところから50個ピックアップしてまとめました。後から読み返しやすいようにサイトのタイプ別に分類しています。 ※2016年3月末時点でWordpressでつくられたサイトであることに注意してください。 企業サイト・組織サイト 株式会社カカクコム 価格ドットコムなどを運営する株式会社カカクコムのコーポレートサイト。 http://corporate.kakaku.com/ クックパッド株式会社 クックパッド株式会社のコーポレートサイト。 https://info.cookpad.com/ 株式会社ベクター オ

初めまして。 面白法人カヤックでデザイナーをやっているばっこ（@is178）です。 一昔前は画面の中の要素をデザインをすることがWebデザイナーのお仕事でしたが、今や画面の向こうにいるユーザーの体験さえもデザインの対象となりました。 机の前に座っているPCユーザーだけでなく、利用シーンも様々なスマホユーザーの体験まで考慮する必要がある今、認知科学・行動経済学・脳科学などの知識もあると、デザイナーとしての強みになるのではないでしょうか。 そこで、各分野の個人的なおすすめ本を18冊紹介したいと思います。 認知科学 認知科学の対象領域を狭めないために明確な定義はないのですが、特徴づけをするならば「知的システムの構造、機能、発生における情報の流れを科学的に探る学問」です。 お馴染みのアフォーダンスやシグニファイアもこの分野ですね。 1.教養としての認知科学

広告やバナーを製作する際、大切なのが読み手に「インパクト」を与えること。どうやったら目を引く広告がデザインできるのか・・。そう悩むデザイナーの方も多いのではないでしょうか。 そこで今回は、Illustratorの基本操作だけでできる、簡単な表現技術をいくつかご紹介します。 枠からはみ出す 画像リンク：mebic.com こちらはとてもシンプルにインパクトがだせる方法。広告サイズが決まっていると、「この枠の中に情報を収めなければ」と考えがちですが、きちんと可読性さえ残しておけば、すべてを枠の中に収める必要はありません。広告枠からどーんとはみ出せば、広告全体に勢いをつけることができます。 画像リンク：countach.tv こちらのルーツの広告もそうですね。街にある広告などをよく見て回ってみると、「枠をはみ出す」という効果は以外と使われています。今回ご紹介する広告のいくつかにも適用されているの

みなさんは、女性をターゲットにした広告を制作するとき、どんなことに気をつけていますか？ 女性は、男性よりも細かいところまで視線を向けているそうです。そのため、デザインでほんの少しの変化や動き、工夫をつけることで、女性の心をくすぐり、結果的に印象に残りやすい広告を制作することができます。 広告を制作するときに大切にしたいのが、女性の心をつかむ「フック」をたくさん用意しておくこと。それが結果的に、効果のある広告につながると思います。いくつかの事例を参考に考察していきましょう！ 装飾をふやす 例えばこちらは、「箱根スイーツコレクション 2014」の広告。 箱根で行われているスイーツの祭典。毎回、可愛らしいポスターやパンフレットが街を彩っています。ターゲットは恐らく「若い女性」。温泉街にはあまり行かない、若い層に関心を持ってもらうためのイベントだと予想します。だから、温泉のイメージを一掃し、思いっ

皆さんはどのような方法で最新の技術や、コードのTipsを収集していますか？ はてなブックマークやTwitter, GitHubなど様々あると思います。 私はテックブログを使った情報収集をしています。今回はエンジニアが見るべきおすすめのテックブログをいっきにご紹介します。 テックブログとは？ ご存知の方も多いと思いますが、テックブログとはWEBサービスやゲーム等を提供している企業が、自社で使っている技術や開発手法を紹介するブログです。デベロッパーブログとも呼ばれます。 エンジニアが持ち回りで書くことが多いので、そこで働いている人のこともわかっちゃいます。 普段使っているサービスがどのような言語でできていて、どのようなフレームワークを使っているか、どんなツールを利用して開発しているのかが載っているのでとても刺激的な内容ばかりです。 転職、新卒の会社選びにも役立つ!? 転職する際に気になるどんな

デザインにおける配色の役割は、デザインをする対象の特徴を表す役割があります。 何かをデザインする際に、テーマとなる色を決めルールに則って戦略的に配色することで、よりよりよいデザインにすることが可能です。 そこで今回は、ノンデザイナーでも知っておきたい「配色の基本的な考え方」と「色が与える印象」についてご紹介します。 配色の考え方 デザインをする際に、色の割合がおかしかったり、ただ単に色をたくさん用いることは、デザインするもの自体のイメージを壊してしまう可能性があります。 特にWebサイトをデザインする際は、1つのサイト上に異なる色をたくさん使用してしまうと、どうしてもまとまりのない印象を与えることになります。 配色のコツは、使う色の割合をきちんと決めて、色数を絞り込むことです。 配色に自信のない場合は、使う色を3色以下にすることおすすめします。色の数を絞ることにより、まとまりのある引き締ま

現在のWeb制作は、フロントエンド技術やブラウザの機能が充実してきたことで、少し前までは難しかったリッチな表現が取り入れやすくなりました。 一方、高解像度モニタからスマートフォン、スマートウォッチなど、多種多様なスクリーンに合わせて表示する要素を精査し、画面を設計する必要もでてきています。 私自身は広告サイト制作よりもCGMサイト制作の比重が大きいため、基本的に地味なUIパーツやUXの設計、改善に関わる内容を中心に情報を集めています。 その中で個人的に気になった技術、海外の記事やWebデザインのショーケースサイトでよく見る傾向、最低限抑えておきたい考え方などを5つほどまとめました。 クライアントサイドでの画像加工 デザイナーが加工したデータをアップしたり、サーバーサイドで処理することなく、クライアントサイドで画像を加工する技術を目にする機会が増えてきました。実装方法としてはCSS、SVG、

こんにちは、灰色ハイジ（@haiji505）です。 最近LiBという女性向け転職サービスのスタートアップに入ったデザイナーです。 その前は、学生の時にWebサービス会社のはてな、卒業後は広告代理店グループの制作会社である博報堂アイ・スタジオという会社でWebデザイナーをしていました。 学生当時、就職活動で悩んだのは「制作会社」と「事業会社」どちらに行くのが良いんだろう？ということでした。 入ってみるまでその仕事の違いはなかなか分かりません。どちらも働いたことのある経験から両者の特徴と選ぶポイントをご紹介します。 これからデザイナーとして就職を考えている学生さんや、転職を考えているデザイナーさんの参考になれば幸いです。 制作会社の仕事って？ 受託と呼ばれる、他の企業から請け負って制作をする会社です。 近年、デジタル領域におけるデザイナーの役割は幅広くなってきました。 Web/アプリ/屋外広告

2月になりましたので、1月中に話題になった「デザイン」に関するエントリーをご紹介します。 今月はアプリを実際に開発しているデザイナーのエントリーや、デザイン思考の話題が目立ちました。 「デザイン思考」「プロダクトマネージャー」など、キーワードはなんとなく知っているけれど、その言葉の実態を理解していない人にとって役立つ話ばかりです。 『デザイン思考』とは何か。 2015年は様々な場所で「デザイン思考」という言葉を耳にしました。この1年の間に「デザイン思考」に関する本は100冊近くも出版されているほどの人気です。 このエントリーでは、タイトルにもあるように「デザイン思考の本質」が何なのかを5つの例を用いて具体的に説明しています。 1. 公共のトイレの掃除 2. フジテレビの視聴率低迷の原因 3. 宇宙兄弟に学ぶデザイン思考①「コロッケ・イノベーション」 4. 宇宙兄弟に学ぶデザイン思考②「ロケ

デザインをしつづけていると、たまに柔軟に考えられなかったり、自分のデザインに対して疑問を感じるときがありませんか？ そういうときは一度、初心にかえってデザインに関して考え方を見直したり、インスピレーションを刺激することも大切です。 また、デザイン思考を身につけるためにも、常日頃から考え続けることも重要です。 今回は、過去に話題になり、読むだけでデザインに関する「考え方」が深まる14個の記事をご紹介します。 デザインに対する考え方が変わる・深まる記事 これはウェブページです｡ ウェブデザインの本質は､言葉です｡ ウェブで一番強力な道具は､今も昔も言葉だということを、思い出させてもらいました。 ▷これはウェブページです｡ 選ばれるウェブデザインとは ９つの基本的なルールと感情に訴えるデザインについて詳しく書かれています。 サイトの使いやすさだけでなく「ユーザーがそのサイトにどんな感情を抱くか」

広告やチラシや提案書を作成する時、また名刺やWebサイトをデザインする際にも、無造作に文字や画像を並べるだけでは綺麗で見やすいものにはなりません。 配置する要素の関係性を考慮した上で、近くに置くのか、揃えるのか、コントラストで見た目の変化をつけるかなど一定のルールや基本、セオリーをもってデザインを行えば、わかりやすく綺麗なレイアウトになります。 そこで今回は、レイアウトに関する“近接、整列、反復、コントラスト、余白”の5つのデザインの原理・原則をご紹介します。 1.近接（Proximity） 近接とは、関連する要素を近くに配置しグループ化することを指します。 近接の大きな目的は要素の「構造化」になります。関連する要素を近ずけてグループ化することにより、なんでもなかったものが構造化して意味を持つようになります。 要素間のスペースの距離は、その要素同士の関係性を示すことになるので、反対に関係の