メインビジュアル、CTA、フッターなど、セクションやパーツごとの部分的なデザインを集めたサイトです。主にSaaS/コーポレートサイト/BtoBのWebサイトやランディングページを掲載しています。Webサイト制作の構成やキャッチコピー、デザインの参考にどうぞ。
Parts. - パーツ別Webデザイン集
メインビジュアル、CTA、フッターなど、セクションやパーツごとの部分的なデザインを集めたサイトです。主にSaaS/コーポレートサイト/BtoBのWebサイトやランディングページを掲載しています。Webサイト制作の構成やキャッチコピー、デザインの参考にどうぞ。
主な企業サイトの種類と特徴 | knowledge / baigie
ウェブ制作の仕事をしていると、「コーポレートサイト」「オウンドメディア」「製品サイト」「ランディングページ」といった言葉を当たり前のように耳にします。 でもある時、「コーポレートサイトって何だろう？」と思いました。 言葉をそのまま直訳すれば「企業サイト」ということになりますが、そうであるならば、企業が作るオウンドメディアや製品サイトやランディングページもコーポレートサイトではないでしょうか。なぜこれらのウェブサイトのことはコーポレートサイトと呼ばないのでしょうか。 この疑問を切っ掛けに、企業サイトにまつわる数々の言葉の定義をハッキリさせようと考えて、この記事を書きました。 調べてみると、「この言葉はこういう定義じゃ」と決めてくれるウェブサイトの神様のような方がいるわけでもなく、それぞれの会社・現場・人・文脈に応じて、ある程度の解釈の幅をもって使われているのが実状です。 そのためこちらでご紹
iOS対応のWebサイトでは、「ページ下部の隅に追従するボタン」を置いてはいけない - Qiita
PCのレスポンシブレイアウトで動作確認を行っていて、実機での動作確認を怠っているとハマる罠 「ページ下端固定のボタン」の罠についてご紹介します。 iPhoneのMobile Safariにはデッドゾーンとか言われるものが存在します。 画面を下スクロールしてアクションバーを消えている状態で、下端をタップすると 「Safariのアクションバーを表示する操作」として認識されていまうのです。 そして、意図していたタッチイベントは発火しません。 ちょっと参考画像が縦に長いですがデッドゾーンがこんな風にあるイメージです。 このアクションバーが現れるデッドゾーン、具体的には44pxらしいです。 さらに、iPhone X系などのホームボタンのない機種ではセーフゾーンなんかも現れて 当たり判定が奪われてしまうこともあるようです。 詳しいことはこの記事が詳しいです。 iOS Safariのアクションバー表示エ
8 rules to help you design a better card user interface
Cards have exploded in popularity over the last decade due to the proliferation of online media and mobile apps. Unfortunately, user experience issues arise regularly from poor card design. A card is a user interface component that provides a summary and an entry point to additional information. Elements of a card component include media objects, titles, subheadings, metadata, summary text, and ac
Fin/d（ファインド） 金融サービスをかしこく活用しよう
Fin/d（ファインド）は、お金に関するさまざまなことを「知る・比較して選ぶ・行動に移す」ための情報をお届けします。
Webサイトのメインビジュアルの構図を集めて分析してみた。｜ameko
初めまして、ameko(@tk04amedama)と申します。 普段は都内の制作会社でWEBデザイナーをしています。 と言ってもまだまだ新米なので、日々勉強中です。 その勉強の一環で、最近のWebサイトで使われている メインビジュアルの構図を一覧にしてまとめた画像をTwitterに投稿してみたところ、思いがけず多くの方に反応いただけたので、その後に行っていた構図ごとの分類分けや分析も公開してみようと思い、初めてnoteに投稿してみました。 はじめに集めたサイトの数は全部で７０個。自分の仕事の参考のために集めたものなのでほとんどがBtoB向けサイトです。（BtoC向けサイトだと、この構図一覧もまた、全然違うものになりそうだなと思う。） 構図の名前は、なんとなく自分なりに語呂がいい名前をつけているだけなので、あまり突っ込まずふんわり流していただけると幸いです。（もしこの構図の正式名称とかあった
スマホ向けサイトをアプリっぽく見せるために半年間頑張ったことをまとめる - Qiita
この記事は リクルートライフスタイル Advent Calendar2018の20日目の投稿です。 はじめに この記事では スマホ向け web ページをアプリっぽく見せるための Tips を多く紹介します。 (CSS / JS / jQuery / React / WebGL の事例を紹介します) （注） React 環境でのサンプルコードが多めですが、実装方法はどの環境でも変わらないと思います。ライブラリも同種のものが存在しているはずです。 最近だと、僕の大好きなアプリで味わった体験を、どうすれば Web で再現できるかなーって考えていました。そうしたネイティブアプリをWebで模倣したときに、知ったTipsやテクニックをまとめていきます。 この記事に書いてあること アプリっぽい体験はどのようなものがあるか CSS / JS / jQuery / React / GLSL を利用したネイテ
モバイルではメニューを画面下に表示すべき理由
スマートフォンの使い方が、脳に影響を与えることがあります。ある調査によると、毎日スマートフォンを使う人は、脳の体性感覚皮質が大きいことがわかりました。体性感覚皮質は、親指のコントロールをつかさどる部位です。 また、ほかの調査では、ほとんどのユーザーがスマートフォンを片手で操作していることが明らかになりました。スマートフォンを握っているとき、ユーザーは左右どちらかの親指で画面を操作しているのです。親指はユーザーにとってマウスのようなものですが、その動きには限界もあります。 親指はマウスの代わり デスクトップデバイスでは、ユーザーは画面の操作にマウスを使用します。ナビゲーションメニューまでマウスを動かすことは簡単です。なぜなら、マウスは手首の動きを制限しないからです。 しかし、ユーザーがスマートフォンを握っているとき、親指は限られた範囲でしか動けません。画面に親指が届かない領域があるのです。こ
探検！京都大学
時計台の時計 時計台の時計は、1925年2月に時を刻み始めました。ドイツのシーメンス社製で、ドイツ人技師が組立に当たりました。文字盤照明装置の設計者は、工学部建築学科初代教授で時計台の設計者でもある武田 五一氏 塔の高さ 95尺（約30メートル） 長針 長さ: 3尺5寸（約1.35メートル） 重さ: 8貫（30キログラム） 短針 長さ: 2尺8寸（約1メートル） 重さ: 3貫（11.25キログラム） (参考) 一尺 = 30.3030303 センチメートル、 1寸 = 3.03030303 センチメートル、 1貫 = 3.75 キログラム 湯川記念室 湯川博士の研究生活の面影を伝えてその偉業を偲ぶために、湯川博士が使用していた旧所長室を「湯川記念室」として保存。書籍（遺著約250冊、蔵書約1,920点）を所蔵。 湯川秀樹氏 京都帝国大学理学部出身。1949年日本人として初めてノーベル物理学
長いページでも飽きさせない3つの工夫 - Oisix ra daichi Creator's Blog（オイシックス・ラ・大地クリエイターズブログ）
初めまして。デザイナーの高橋です。普段はUI設計や改善を担当してます。 前回、出口さんの旬ページリニューアル事例のエントリーでは、 スマホファーストの考えに基づき、「読ませる」より「見せる」にデザインの方向性を決めて「ビジュアル訴求を高めた」事例について紹介しました。 では、どのようにして「見せる」ことを実現させるためにスマートフォン上のデザインで解決していったのか？ 今回はその事例をご紹介できたらと思います。 簡単に「見せる」と言っても、オイシックスの売り場の特徴はページの「長さ」にあります。 いかにしてお客さまがサイトに訪問していただいた時のテンションを維持したまま、ページの最後まで飽きずに「見て」いただくことが出来るかが、デザインの成功のカギだと考えています。 そのため、長さを極力意識させない工夫、またテンションを上げもらう工夫が必要です。 「見せる」ためにやったこと そのために具体
アップルとグーグルのガイドラインに学ぶスマホWebデザインの要点（スライド付） | ベイジの社長ブログ
スマートフォン対応させるWebサイトが急増しています。しかし、スクリーンが小さくタッチ操作がメインのスマートフォンでは、デスクトップ向けWebサイトのデザインで培ったノウハウの多くが通用しません。このような時代におけるスタンダードなデザインルールを学ぶために、弊社デザイナーの荒砂を中心に、Appleが公開しているiOS Human Interface Guidelineと、Googleが公開しているMaterial Design Guidelineの比較を行いました。（以降、両者をガイドラインと略します） スマートフォン向けのWebサイトのデザインを考える上で、アプリのUIデザインの定石を知ることは重要です。なぜなら、スマートフォンにおいてはWebサイトをブラウズする機会は14％しかなく（comScore調査／2014）、多くの時間をアプリの中で過ごしているためです。さらにユーザは「これは
ポータルサイトのデザインリニューアル案件で気をつけたこと＆使える心理学 - Design Color
色を使いすぎない 以前に書いた「ポータルサイトのデザインをする時に意識したこと5つ」という記事でも触れましたが、今回も特に気をつけました。 ポータルサイトは一画面に表示される情報が多いです。文字はもちろん、画像の量が多くなります。サイトによってはバナー広告もあるので、それらの色に加えて、サイト自体の色もカラフルだと、目が疲れてしまいます。 そのため、色数を極力おさえることでサムネイル画像やタイトルに注目が集まるよう心がけました。そうすることで、ユーザーは情報を探しやすくなり、記事を読む事に集中できます。 逆に、色がゴチャゴチャしてどこを見たらいいのかわからない状態になると、ユーザーの離脱を招くことにもなるため注意が必要です。 選択肢は4つ程度にとどめる 今回のリニューアルにあたり、ポータルサイト内の選択肢を極力4つ程度にとどめる工夫をしました。その理由についてはふたつの心理学が関係していま
http://oalp.org/doc/nilesen/
For full functionality of this site it is necessary to enable JavaScript. Here are the instructions how to enable JavaScript in your web browser.
切れないハサミと使えないWebデザイン | ベイジの社長ブログ
本エントリーは、以下の目次で構成されています。 2種類のハサミと2種類のWebデザイナー Webデザインの特殊性 ビジュアルのディテールに神が宿らないWebデザイン 美しいが使えないWebデザインをしてしまう理由 Webデザイナーを支配する「強固な固定観念」と「裏の動機」 美しいビジュアルの根底にあるデザインの本質 本当に「最近のWebデザインはつまらない」のか？ ミスマッチが生む不幸なWebデザイン Webデザイナーに求められる自らのスタンス Web制作会社にも求められる明確な価値観 2種類のハサミと2種類のWebデザイナー 例えば、以下のような2種類のハサミが存在するとします。 工芸品のように美しいが切れ味はよくないハサミ 見た目はそれなりだが非常によく切れるハサミ 1は、ハサミとしては売れないでしょう。ただ、それが刺激的で斬新なビジュアルであった場合には、特別な賞を取ったり、美術館に
Jリーグはスマホで見づらいサイトが多いなという日頃の印象を確認するため、淡々とスクショを撮ってみた件。 : スポーツ見るもの語る者〜フモフモコラム
Jリーグはスマホで見づらいサイトが多いなという日頃の印象を確認するため、淡々とスクショを撮ってみた件。 Tweet Share on Tumblr カテゴリ:サッカー 2014年09月02日12:57 字が小さくて読めぬというジジイへの入り口！ 今日は前々から気になっていたことについてです。僕は最近スマホをいじることしか出来ない人間となっています。朝起きれば枕元のスマホをいじり、会社に行けばトイレでコソコソとスマホをいじり、歩いているときもスマホをいじり、家に帰ったらテレビを見ながらスマホをいじる。せがれをいじるかスマホをいじるか、その二択の生活です。 そんなスマホ生活の中で、時折感じていたことがあります。それは「Jリーグ情報はスマホで読みづらい」ということ。別にJリーグの話だけを調べているわけではないのですが、バズっている話題についてウェブサイトを見に行ったとき、「読みづら！」「小っさ！
ウェブデザインをはじめるあなたへ - ウェブ雑記
ウェブデザインについてまったくわからない頃によく見て勉強してた資料群です。＋いくつかの自分で作った資料 SlideShare 色彩センスのいらない配色講座 色相、明度、彩度で色を説明できるようになる。 ベースカラー、メインカラー、アクセントカラーで配色を説明できるようになる。 その上で、あまり間違いのない色の選び方がわかるようになる。 ノンデザイナーのための配色理論 最後に紹介されているこのツールがベースカラー、メインカラー、アクセントカラーを決める上で便利。 ウェブサービスの企画とデザイン 僭越ながら明治学院大学で講義した時に作った資料。 なんとなくウェブサービスを作るときの流れとか感じてもらえたら幸いです。 かんたんキレイなウェブデザイン 僭越ながら勉強会 (UT Startup Gym) 用に作った資料。 なんとなく CSS フレームワーク、グリッドシステム、レスポンシブデザイン、ウ
センス上がった！タイプ別に分けたWebデザインの参考になるサイトまとめ
作成：2014/06/30 更新：2014/11/01 Webデザイン > サイトのデザインセンス、または操作性などが良いのか悪いのかわからない。 オシャレで洗練されたデザインにするため、少しでもセンスを上げるために色々なサイトをチェックしておきたい。 今回はただWebデザインギャラリーサイトを紹介するのではなく、ページ別・職種・動き・制作別など「サイト制作時に役立つ」くくりでまとめました。コーポレートサイトやECサイト・自社サービスのデザイン考えるとき、提案前に一度は見ておきたいまとめ。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 配色 １．グラデーション＋フラットデザイン ２．ダッシュボードの配色例 ３．高級感を出す配色 ページ別 ４．採用ページ ５．404ページ 職種別 ６．和菓子系（不足の美） ７．女性向け（エディトリアルデザイン） ８．医療系 ９
お金をかけないランディングページのつくりかた
ランディングページを作るとき・直すときには「見た目」を考えるよりも前に「何を伝えるか？」を考えることが重要になります。 これまで1000回以上のABテストを実施してきたデータアーティストのノウハウをギュギュっと詰めて、そしてちょっとふんわりさせたランディングページ最適化の資料です。Read less
『デザインは8の倍数でできている』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか？」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ（サイズ）を指します。 【第１部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
NHKスペシャル｜戦後70年 戦争と平和を考える
