CSSで見出し固定＋レスポンシブ対応の表を作成
2019年10月17日 CSS, HTML, Webサイト制作 料金表やサービスプランの比較、タイムテーブルなどなど、使う場面が多い割には制限も多く、初心者には少しとっつきにくいと思われがちな表。今回はあると便利な表の見出し固定やレスポンシブ対応の方法を紹介します。 見出しの行を固定する 表の中の行が増えてくると、スクロールした時に表の見出しが画面から見えなくなり、なんの値だったのかがわかりづらくなります。そんな時のために、行数の多い表では一番上にくる見出しの行を固定しておくといいですね。 まずはベーシックな表を作成します。table タグに border-collapse: collapse; を指定することで、セル間のスペースがなくなってフラットな見た目になりますよ。 HTML <table> <tr class="heading"> <th>車体名</th> <th>価格</th>
スマホアプリのメニューでよく使用されるあのアイコンの名前、ハンバーガーとかケバブとかミートボールとか
先日の記事「Chrome 67でアップデートされたデベロッパーツールの新機能」で、「ケバブって言うんだ」という声が聞こえたので、メニューでよく使用されるアイコンの名称を紹介します。 横3本線のアイコンはほとんどの人が「ハンバーガー」で通じるでしょう。横3つのドット、縦3つのドットは、何て呼んでますか？ 特に名前は使わない、別の呼び方をしているなどありましたら、教えてください。 CSS Menu Icon Animation ちょうど、スマホアプリのメニューで使用されるアイコンのデモにもそれらの名称が使用されていました。これらはクリエイターの遊び心で名付けられたもので、公式な名称ではありません。 私は最初、この呼び方を下記のツイートで見た記憶があります。 Don't ever say you don't have choices on mobile. pic.twitter.com/Atu3
2019年に流行するWebデザインの最新トレンド18個まとめ | Web Design Trends
そろそろ2018年も終わりを迎え、2019年がやって来ようとしています。この1年でWebデザインのトレンドにも様々な変化がありましたが、2019年はどのようなWebデザインの手法が流行するのでしょうか？ 最新のWebデザインのトレンドを取り入れることによって、Webサイトを魅力的に見せることができたり、使いやすいWebサイトを提供することができるなど、様々なメリットが生まれます。 今回は、2019年に流行するWebデザインの最新トレンドを一気にご紹介していきたいと思います。 2029年のWebデザイントレンドに関する記事を公開しました！最新情報を知りたい方はこちらをご覧ください。 2022年に流行するWebデザインの最新トレンド10個まとめ 2021年のミニマリズムを中心としたトレンドが注目されていましたが、2022年は鮮やかで、奇抜で、記憶に強く残るようなデザインを中心としたトレンドが注
『デザインは8の倍数でできている』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか？」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ（サイズ）を指します。 【第１部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p
Webサイトの目的別5パターンの鉄板レイアウト
Webサイトの目的は様々あります。 サービスの認知度向上や広告での売上獲得などあらゆる目的が存在し、それぞれに応じた最適なレイアウトがあります。 今回は、目的別に代表的なレイアウトを、最新トレンドも交えながらご紹介します。 これからWebサイトを制作する方はもちろん、現状のWebサイトが目的に対して最適なレイアウトになっているかという観点からも参考にしてみましょう。 1.商品やサービスの認知度を向上させたい いわゆるプロモーションのためのWebサイトです。広告では、表示回数（露出数）を主に狙っていきます。よりユーザーの記憶に残るように、サービス・商品の名前や特徴を印象付けるデザイン・レイアウトが必要になってきます。 よりビジュアルに特徴をもたせたものが多いです。最近では画面いっぱいに写真や動画を配するデザインが流行しており、Bootstrapのテンプレートを使用すれば簡単に導入できるのでオ
トップページがド派手に動くWEBサイトまとめ≪10選≫
WEBデザインで表現できることは日進月歩でどんどん増えていき、これを加速させている理由がJavaScriptという言語であることは皆さん周知のことかと思います。 そんなJavaScriptを使用している魅力的なサイトをご紹介いたします。 2,100社以上のWeb制作実績！ BtoB企業で成果を出すWeb制作プラン公開中！ Webサイトを制作するだけではなく、戦略・施策立案、Web制作、SEO、MAを活用したリードナーチャリング、コンテンツマーケティングなど、Webマーケティングの川上から川下まで、一気通貫で支援が可能です。少しでもWebリニューアル、ホームページ制作に興味がある方はお気軽に詳細をみていってください！ 詳細を見てみる 動きのあるサイトとは 動きを加えたサイトにすることによるメリットを考えてみました。 メリット ・魅力的なサイトになる 動きの無いサイトに比べて、視覚的効果がある
スマホのメニューデザインに悩んだらこれ！パターン別サンプル36選 | LISKUL
スマホはメニューバーが命！！ スマホでもっとも重要な動作は「タップ」ですが、その重要な役割を引き受けるのがメニューアイコンやリストです。 ユーザが求めるコンテンツにスムーズにつなげられるよう、最適化していくことが必要です。 ただそのデザイン、「なんとなく」のものになっていませんか？ 違和感なくスムーズにコンテンツにつなげるためには、最適なデザインを選択する必要があります。 今回は100のスマホサイトを調査し、その中で代表的な36サイトから7つのメニューデザインに分類し、まとめてみました。 自分のスマホサイトの性質を考えながら、もっとも適切なメニューを探していきましょう！ 100のスマホサイトから見る、 スマホメニューの人気ランキング 上図は、100のスマホサイトをランダムに抽出し、それぞれのサイトで採用されているメニューの割合を調査した結果になります。この結果によれば、一位が圧倒的な割合で
Webデザインの参考にしたい、ファーストビューのアイデアその2
作成：2018/05/14 更新：2018/05/15 Webデザイン > 今年はスプリットスクリーンや一部をレイヤーさせる見せ方を見るようになりました。（参考：2018年に使いたいWebデザイントレンド ！ファーストビューのアイデア集）今回は、周辺に余白をつかったものなど、少し違うアプローチのファーストビューのアイデアをまとめました。提案前に見ておきましょう。 エンジニア速報は Twitter の@commteで配信しています。 2018年微増しているレイアウトの傾向 最近少しづつ増えてきたレイアウトは ファーストビュー周辺に余白を取り入れる 余白の中にメニュー等を配置 縦、横に分割 画像と文字を不規則にレイヤーさせる 整列を一部崩している フェードやスライド以外の複雑なエフェクト といったところでしょうか。それでは少し例を見てみましょう。 横にセパレート 縦に分割するスプリットスクリー
デザイン初心者必見！デザインの方向性を共有する「ムードボード」を便利ツール5選とともに解説
「意図したデザインアイデアが伝わらない・・・」 そんな思いをしたことのあるプロジェクトマネジャーはいませんか？ 思い通りのアイデアがデザイナーに伝わらないのは、共有不足なのではなく、共有の方法に問題があるのかもしれません。そこでデザイナーをはじめとして、デザインアイデアの共通認識を行うために「ムードボード」と呼ばれるカンバスを作成することがあります。 今回は、デザインの方向性を共有する「ムードボード」を便利ツール5選とともに解説していきます。アイデアを共有するのに困ったら、ムードボードを作成してみてはいかがでしょうか。 チーム内のデザイン認識のズレを防ぐ「ムードボード」とは？ 画像引用元：BURST by shopify *ムードボード（Mood Board）*とは、インテリアやファッション、グラフィックなどのデザイン分野で、アイデアやコンセプトを画面や紙面にコラージュとして作成したものを
Webデザイナー必見！デザインの最新トレンド収集やスキルアップに活用できるスライド21選
Webデザイン業界は、トレンドの移り変わりが非常に早いのが特徴です。テクノロジーの発展やスマートフォンの普及も影響し、グラフィックからUI/UX、モバイル向けデザインなど様々なトレンドが誕生しました。 Webデザイナーであれば常日頃から情報収集を欠かさないという方もいるのではないでしょうか。 そのような時は、*セミナーや勉強会で利用されたスライドを閲覧できる「Slideshare」から情報を得ることをオススメします。*基本的なノウハウから、トレンドを取り入れた新しい手法など様々なスライドが共有されているため、書籍ではまかないきれない情報を得ることができるでしょう。 今回は、スキルアップを目指す若手Webデザイナー向けのスライドを21種類まとめました。ぜひ、Webデザインのスキルアップに活用してみてください。
すべてはファーストビューで決まる！日本発の美しいヒーローヘッダーのホームページ20選
*「メラビアンの法則」*という言葉を聞いたことがありますか？ アメリカの心理学者であるアルバート・メラビアンが1971年に発表した論文「Silent messages」の中で紹介した研究結果を法則化したもので、コミュニケーションで相手に与える印象は視覚情報と聴覚情報の9割で決まるというものです。 ホームページ閲覧時においても「メラビアンの法則」は当てはまります。 つまり、書いてある内容がどうであっても、最初に目に入ったホームページのデザインによって印象が決まってしまう、というものです。 もちろん、最終的には書いてある内容が役に立たなければ意味がないのですが、まず書いてある内容を読みたいと思ってもらえないと始まりません。 よく「ファーストビューが重要」と言われるのは、このような心理的な作用が背景にあります。 ファーストビューの中でも、特に*「ヒーローヘッダー」*は大きな面積を占めます。「ヒー
ユーザビリティに大きく関わるグローバルナビゲーションの基本を解説
ホームページを閲覧するとき、どこに何の情報があるかわからないとユーザーにとってストレスになります。わかりやすくスピーディーに必要な情報を探すために重要なのが、グローバルナビゲーションです。 今回はこれからホームページを制作するWebご担当者様が知っておくべき、グローバルナビゲーションについてご紹介します。 グローバルナビゲーションとは グローバルナビゲーションは、ホームページ内のコンテンツを集約して、固定して表示されるリンク集です。コンテンツが分類されており、欲しい情報を見つけやすくなります。 ホームページ内の情報によって分類方法が異なります。 情報別 株式会社ベーシック 企業情報や、事業紹介、採用情報など情報別に分類します。 対象者別 東京大学 ホームページを閲覧する対象者別に分類します。 商品別 Apple 商品別に分類します。 このように、分類方法はコンテンツ内容によってことなります
「Webデザイナー」が「UXデザイナー」になるための5つの考え方
ホームページをビジネス上の広告塔として位置付けている場合、ある程度のデザインも大切ですが、コンテンツの内容や使い勝手はさらに重要です。 事実、最近のGoogleの検索エンジンの仕様では、コンテンツの内容がユーザーにどれだけ役に立っているかをさまざまな指標で評価し、検索順位を決めています。 また、WixやAmeba Owndなど、簡単にカッコいいホームページを無料から作成できるサービスが登場しているので、コンテンツの中身さえしっかりと作り込めば誰でも発信できる時代になっています。 その中で、Webデザイナーという仕事は絶妙な立ち位置にさらされています。 これまでは、「デザイナー」といえば、見た目を綺麗にしたり、広告のクリエイティブを1pxの誤差なく作成するといういわば*「絵を描く」作業*を行う職業と思われてきたところがあります。 しかし、デザイン思考やサービス設計などの新しいプロセスを通して
ハンバーガーメニューに代わるナビゲーションデザイン案10選
モバイルアプリケーションやウェブサイトのデザインは、画面が小さいゆえにどのようなデザインが好ましいか、常に議論されています。 文字のサイズ、画像の解像度、効果的なアイコンの使い方、アニメーションやカルーセルまで、小さな画面で効率よくブラウジングできるように、デスクトップアプリケーションやパソコンで見るWebサイトと異なる考え方で設計することが大切です。 その中でも比較的よく使われるのが、ハンバーガーメニューです。 ハンバーガーメニューは、3本の横線が並んだアイコンをタップすることでメニューを表示させる仕組みのUIで、ファーストビューでメニューを表示するスペースを節約できるので、多くのデザイナーが好んで使っていました。 実際、レスポンシブデザインを採用していても、画面サイズが大きければ通常のメニューを採用し、画面サイズが狭くなればハンバーガーメニューに切り替えるといったデザインが採用されるこ
【人気記事ランキング】昨年1年間に公開されたデザイン関連の人気記事TOP29をご紹介！
関東地方でも桜が開花し、ついに4月（新年度）がスタート。新たなメンバーが加わり、心機一転、業務に取り組もうと気持ちを新たにしている方もいらっしゃるのではないでしょうか。 さて今回は、昨年度、Webマーケティング総合メディア「ferret」で公開された記事のうち、特にデザイン関連記事の中から人気の高かったコンテンツTOP29をご紹介します。 知っておかないとまずい最新トレンドや重要キーワード、デザイナーの作業を効率よくしてくれる便利なサービス、スキルアップに役立つ記事……など、どの記事もデザイナーなら見逃せない内容となっています。 デザイナーの方はもちろんですが、Webディレクターやマーケティング職の方にもオススメの記事ばかりです。ぜひ、見逃したものがないかチェックしてみてください。 直近1年間に公開！人気の高かったデザイン関連記事TOP29 1. あなたはいくつ知っていますか？2016年に
情報アーキテクチャ（IA）とナビゲーションの違い
IAはサイトを支える情報の基盤である。一方、ナビゲーションとはサイトの特定の情報にユーザーがたどり着くことを可能にするUI要素をさす。 The Difference Between Information Architecture (IA) and Navigation by Jennifer Cardello on June 22, 2014 日本語版2014年7月22日公開 専門家の中にも、情報アーキテクチャ（IA）とナビゲーションデザインを一括りにしてしまう人はいる。これらのコンセプトは関連があり、情報アーキテクチャによって、Webサイトのナビゲーションデザインの情報が伝わるというのは事実である。しかし、IAとナビゲーションというのは別物だ。実際のところ、情報アーキテクチャの領域はWebサイトのナビゲーションよりもはるかに広い。Nathaniel DavisはUXについて書いた記事、
【2016年版】これだけ読めば大丈夫！デザインの基礎が学べる厳選15記事
「ちょっとしたデザインは自社で対応している」という企業も珍しくなく、本業ではない方が兼業でデザイン作業を任されているケースも少なくありません。 しかし、「本格的にデザインに関する知識・技術」を学んできていないこともあり、制作するものに自信をもてなかったり、そもそも学ぶにしても「どこから勉強したらいいかわからない」という方も多いのではないでしょうか。 デザインは「才能」「センス」というイメージを持ってしまいがちですが、実際にはルールや原則があり、理解すれば誰でも基本に則ったデザインワークをこなすことができます。 そこで今回は、初心者にもぜひオススメしたい『デザインの基礎が学べる記事』をまとめてご紹介します。 デザインの基礎 1.【追記あり】【初心者】デザインってなんだ？「デザイン」の概念と、４つの基本原則を知ろう http://wp-e.org/2014/03/09/995/ これからデザイ
UI/UXが優れている！2016年オススメのWebサイト・アプリ9選
使いやすく、心地よいホームページには、必ず根拠があります。 「使いやすい」「心地よい」という感覚を生み出す重要な要素の一つが、UI/UXです。 どれだけ素晴らしいコンテンツが用意されていたとしても、UI/UXが優れていなければ長期的に利用してもらうことはできないでしょう。 今回は、ホームページやアプリの中で「インターフェイスのデザインやユーザー体験が素晴らしい」と話題になったものご紹介します。 UI/UXが優れている！Webサイト・アプリ9選 1. Stripe Radar https://stripe.com/radar Stripe Radarは、従来の決済システムと異なり、機械学習を取り入れた誰でも簡単に導入できる決済システムです。 トップページはマウスで動かして機能性を確認できる多面体で、傾けて奥行きをつけた動画の配置、紫色が特徴のグラデーション、シンプルなアニメーションなど、見て
WebデザインでPhotoshopを使う際の活用術9記事
Photoshopは写真の補正をしたり、グラフィックを作ったりとあらゆる作業に活用できる非常に万能なソフトです。PhotoshopはWebデザインにおいても欠かせないツールですが、意外にも使ったことがないという方、試してみたけれど使い方が分からない方も多くいらっしゃいます。 今回は、WebデザインでPhotoshopを使いはじめようとしている方に読んでいただきたい記事をまとめてご紹介します。作業の手順から効率化までしっかりと理解することができますので、参考にしてみてください。 PhotoshopでのWebデザイン作業で読んでおきたい記事まとめ 1.PhotoshopでWebサイトのデザインをしよう｜Webクリエイターボックス http://www.webcreatorbox.com/tech/photoshop-web-design/ Web関連の情報を幅広く届けている「Webクリエイター
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
株式会社ガイアックスの公式サイト › ガイアックスオフィシャルサイト
