ウェブサービスの管理画面を作る上で守るべき6つのルール | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！！ メディア事業部のまさしです。 昨今、ウェブサイトをはじめとするウェブサービスやアプリなどは、作っておしまいではなく、作ってから運用し改修を続けて成長させていくことを前提とするようになりました。 その際に重要な役割となる管理画面ですが、管理画面って作るときに何のデータを出していいのか、どうデザインしたらいいのか迷いますよね。結果、あらゆる機能とあらゆるデータを盛り込んだ管理画面になってしまいがちです。 今回は、そんな悩みを解消できるように、目的に合っている使い勝手の良い管理画面をつくるための6つのルールをご紹介いたします。 ウェブサービスの管理画面をつくる上で守るべき6つのルール ルール1：ターゲットは1つに絞るべし！ 最も効果的な管理画面とは、単一のユーザーをターゲットとして、その目的をもとに固有のデータを表示しているものです。 複数のユーザーをターゲットとしてしまうと、い
Bootstrapはもう古い!?Gumbyフレームワークが便利 - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
Gumby – A Flexible, Responsive CSS Framework – Powered by Sass こんにちは。ECプロデュース部の岡本です。 みなさまはレスポンシブサイトを作る時、どのようなフレームワークを使用されていますでしょうか？ 有名ドコロであれば「Twitter Bootstrap」や「Foundation」などがよく利用されているのではないかと思います。 特にBoostrapはナビゲーションなどの「コンポーネント」が非常に豊富で、モックアップなどを作成する際には非常に重宝されている様です。 しかし一方でカスタマイズするには束縛されるポイントも多く、実際のコーディングに使うには少し工夫が必要となります。 今回はBootstrap並にコンポーネントが多いのに、カスタマイズ性が非常に高いフレームワーク「Gumby」をご紹介いたします。 特徴１：柔軟なグリッド
SmartNewsのUI/UXエンジニアが語る！「iPhoneの画面サイズと室町時代の違い棚」 | Find Job ! Startup
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
【検証】クリックされるボタンの色は？ | WebNAUT by Beeworks
検証したパターン 調査結果 全アクセスのコンバージョン率（CVR） 結果は下記の通りとなりました。 なんと！緑色がもっともCVRが低いという結果になりました。 どうやら、無条件に「緑色のボタンはクリック率が高い」という結果にはならないようです。 Firefoxをダウンロードしたユーザーと、ビーワークスの採用に応募しようとしたユーザーには、何か違いがあったのでしょうか？ 「どこから流入したか」によって結果に違いがあった 調査対象ページにアクセスしたユーザーは、何かきっかけがあって、ビーワークスの採用に興味を持ってアクセスしているはずです。そこで、どこから流入したのか、「参照元」のセグメント別に結果を分けて分析してみます。 こうやってセグメント別に分けてみると、参照元によってCVRの平均値自体に大きな差があることがわかります。CVR順に並べると、検索 ＞ WebNAUT ＞ なめぱら という結
ロゴデザインの参考になるWebサイト10選
ブランドの顔としての役割を果たす「ロゴマーク」。 企業のロゴやサービスのロゴは、その会社やサービスのメッセージを発信するとても重要な意味を持ちます。そんなロゴのデザインを行う際に、数多くのロゴを見ることでデザインの引き出しを増やすことは必要不可欠。 そこで今回は、ロゴデザインが画像一覧で見られる海外や国内のギャラリーサイトを10個ほどご紹介します。会社やブランドのロゴ、かっこいいロゴからおしゃれなロゴまで、自分の目的に合った参考になるデザインが無料で見つかるのでぜひご活用ください。 参考になるロゴデザインが一覧でみられるWebサイト それではロゴデザインの参考になるWebサイトを10サイトほどご紹介します。ロゴ作成でお悩みの方はぜひ、訪れてみてください。 LogoPond LogoPondは、かっこいいロゴなどクオリティの高いロゴが集まる海外のギャラリーサイトです。 ロゴ作成時にインスピレ
ノンデザイナーこそ押さえておきたい! 配色・レイアウトの基礎が学べる7個の厳選スライド
まだまだメンバーの数が少なく、職種ごとの距離が近いスタートアップ。デザイナーの仕事をディレクターやエンジニアが理解することが、プロジェクトを円滑に進める秘訣です。 デザイナーではない方々にとって、デザイナーが普段何を悩み、どのようにWebデザインしているのか知るのは、非常に重要と言えるでしょう。今回は厳選した7つのスライドをご紹介しながら、「配色」「レイアウト」といったデザインのエッセンスを学びます。 もちろん、本職のデザイナーの方にも役立つスライド7連発です！ １．色彩センスのいらない配色講座 7000いいね! されたスライド 「時間がない！ 今すぐ作り始めないと納期に間に合わない！ でもどんな色を使ったらいいか分からない！」そんな人におすすめなのがコレ。Facebookで7000以上のいいね!がついた、@marippe_さんのモンスタースライドです。 配色や明度・彩度の基礎をお
[CSS]コピペでOK！画像のホバー時用のかっこいい新しいエフェクトのまとめ
HTML 各デモのベースとなるHTMLです。 div要素のclassを変更して利用します。 <div class="pic"> <img src="image.jpg"> </div> 各デモで共通で使用するスタイルです。 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body { background: #333; } .pic { border: 10px solid #fff; float: left; height: 300px; width: 300px; margin: 20px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111
ディレクターが意識すべき、サイトリニューアル前後の心がけ : LINE Corporation ディレクターブログ
こんにちは、ブログチームでlivedoor Blogポータルを担当している小出です。 最近、livedoor BlogのPC版ポータルはフルリニューアルを行い、大きく生まれ変わりました。私はディレクターとして担当したのですが、今回のサイトリニューアルを通して、技術的なトレンドやタスク管理ツールなどは日々進歩していると改めて感じています。今回はlivedoor Blogのリニューアルを通して感じた「ディレクターとしてのサイトリニューアルの心がけ」の要点をご紹介したいと思います。 同じサイトでもアクセスデバイス毎にユーザー層は異なる リニューアルを行うにあたり、まず私が行ったのがサイトのアクセス解析等の各種調査でした。 その調査を通し、ライブドアブログのポータルには PC版はブログ作成者の訪問が多いスマホ/モバイル版はブログ閲覧者の訪問が多いという２つの特徴があることが判明しました。 その結果
必読！5分でわかるレスポンシブWebデザインまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
二度目まして。デザイナーの野田です。 レスポンシブWebデザインについて、僕なりにまとめてみたのでご覧下さい。今回は、制作に関することではなく、最低限知っておかなければならないことの基本編になります。 独学でつまずいていませんか？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情報として持っておいて損はないはず。下記におすすめスクールを集めてみました！ レスポンシブWebデザインとは 「レスポンシブWebデザイン」とは、PC、タブレット、スマートフォンなど、複数の異なる画面サイズをWebサイト表示の判断基準にし、ページのレイアウト・デザインを柔軟に調整することを指します。 現在はPCやスマートフォンなど、デバイス毎に各HTMLファイル
PCサイトの常識が通用しない！携帯サイトでクリックしてもらえるボタンの作り方 | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話
こんにちは！ 今日も携帯をクリックしすぎて手が筋肉痛のユリっぺです✿ 今回は、携帯の「クリックしてもらえるボタン」を作ってみたいと思います。 携帯で遊んでいると、画像でつくられたボタンが選択されてるかわからない、認識しづらい、といった経験をしたことはないでしょうか。 また、携帯サイトを運営しているかたの中には「こんなに目立つボタンなのに全然クリックされない！」といった悩みをもった人もいるかもしれません。 そこで文字の部分はテキストを使ったボタンを作ってみました。 まずはじめに、tableの左右の隙間をすこし多めにとってみます。 (au) <div align="center" style="text-align: center;"> <table align="center"> <tr><td bgcolor="#ffd70b"> <a href="#"><span style="colo
ログイン画面の離脱率を下げる！ECサイト各社の工夫
こたつにみかんはじめました。nonakaです。 週に１度は通販で買い物してます。そんな中、ログインする画面をいろいろ見たので、ファッション通販サイトのログイン画面を集めました！ ファッション通販サイトの場合、ログイン画面に「新規会員登録」への誘導があるのがほとんどです。今回は、2つのパターンにわけてご紹介します。 「ログイン画面」エリア、「新規登録」エリアが上下にあるパターン セレクトショップ：BEYES ログイン画面、新規登録が上下にあるパターン。入力フォームが大きめで入力しやすい。新規会員登録のボタンは色を変えて目立たせてます。 無印良品 ログイン画面、新規登録が上下にあるパターン。フォームとボタンの横幅がそろっていて見やすいですね。 ユニクロ ログイン画面、新規登録が上下にあるパターン。入力フォームが大きくて見やすいです。ログインと会員登録の分けかたも見やすいですね。 子供服：goo
[CSS]CSS3のプロパティを使用した次世代のタブナビゲーション
対応ブラウザも増えたCSS3のプロパティを使用して実装するタブナビゲーションのチュートリアルをMarcofolio.netから紹介します。 Sweet tabbed navigation using CSS3 demo 使用しているCSS3のプロパティは下記のとおりです。 rgba opacity text-shadow pseudo selectors rounded corners gradients box-shadow 画像やスクリプトを使用して同等のものを実装することは可能ですが、軽量でシンプルなコードで実装でき、変更も簡単にできるのが大きなポイントになります。 タブはリスト要素で、HTMLは下記のようになります。 HTML <textarea name="code" class="html" cols="60" rows="5"> <ul> <li><a href="#" ti
デザイナーからデザインの基礎や原則を学べるエントリーまとめ（webデザイナ向け）
webデザインの入門書を買おうか迷っている方。 もしもそんな方がいたら、ネット上にはここを押さえておこうよと、webデザイナーが直接良質な記事を仕上げてくれていますのでそちらを是非一度参考にしてみて欲しいなと思いまとめて見ました。 また、その記事で、もっともぐっときた台詞もチョイスすてみました。 どんな想いで記事を書かれているかというのも大事かなと。 こちらもあわせてどうぞ。 Web制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報 とりあえず時間のない人はこの3つだけでも食べて デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則 最初、デザイナーは型破りであるというイメージを抱く人も多いのですが、実際の現場では、様々な原則の上にあるルールにのっとり、そのルールを崩す「理由」があります。 例えばそれがセンスと呼ばれること
【業種別：80ページ】FBページ作りの参考に！業種別に企業のFacebookページまとめました（国内・一部海外） | HTML5でサイトをつくろう
【業種別：80ページ】FBページ作りの参考に！業種別に企業のFacebookページまとめました（国内・一部海外） 最近各企業がどんどんFacebookページを作りプロモーションをしたり商品告知してたりして来ていますので、一瞬かもしれませんがWEB制作会社でもFPページの提案や作成の依頼がよく来ていると聞きます。 実例がない状態なので既存のFBページでどのようなことが行われるかを参考にしながら考えている人も多いとおもいます。 ウォールだけを設けて情報発信しているページや扉ページを作成したり、動画配信やモニターキャンペーン、診断アプリの作成などさまざまなプロモーションが行われてきていますので、WEB制作で働いている人は今後提案する機会もでてくるとおもいますので、どんなfacebookページがあるのか？調べる際の参考になったらとおもいまとめました。 ぱっと見た感じではやっぱりファーストページがグ
jRumble | A jQuery Plugin That Rumbles Elements
Latest Version: 1.3 Latest Release Date: December 3, 2011 Original Release Date: March 30, 2011 Compressed: 1.47kb Uncompressed: 4.84kb View GitHub Repository About The Plugin jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It's great to use as a hover effect or a way to direct attention to an element. 2016-11-04 Update This project is no longer being
こんなWebデザイナーは成長しない
2013年3月23日 ライフハック Webデザイナーのみなさん、自分を成長させるためにしていることはありますか？効率化をはかるため、よりよいデザインをするためにしていることはありますか？今回はあえてこんな記事のタイトルをつけましたが、ではどうすれば成長できるのか？という点も一緒に考えてみました。もし当てはまるものがあれば一緒に解決策を考えてみましょう！ ↑私が10年以上利用している会計ソフト！ 情報収集をしない Web業界では新しい技術や情報が毎日のように更新されていっています。情報が多すぎてついていけない…新しい事を覚えるのがめんどくさい…という人もいるかもしれませんが、私たちはWeb業界で働いているんです。Web屋にとって情報は武器です。日々の情報収集が仕事に役立つという場面も多くあると思うので、日頃から新しい情報にふれるくせをつけておきましょう。よく読むブログはRSSリーダーに登録し
2011年2月のこれだけ読めば分かる Web 制作者向け情報まとめ | ウェブル
先月の記事が相当人気でしたので今月もやります。また今月も人気なら来月もやります。 これは Web サービスに使えると思った情報 Web サービスを作りたくなるアイディア込みの記事 今年こそWebサービスを作りたい人に伝えたい５つのこと（＋番外編） – パパパパ この記事は精神からではなく、アイディアから Web サービスを作りたくしてくれる記事でした。私はこの記事を通して以下のことを学んだというか勝手に気づいたのでリストアップしておきますね。 ブログパーツを作って宣伝をする。 自動的に一周するサイクルを考える。 面倒くさいものを作ることで大手に参入されない。 時間を短縮する関係のサービスを作る。 食べログとぐるナビから Web サービスの現在と今後を見る [jp]グルメサイトは転換期に来てるんじゃないかなあという話 この一点に置いて、私は個人的にグルメ系の Web サービスとは誰かが得
いろんなパンくずリストを画像を使わずに CSS で再現してみた。 - buena suerte!
CSS Triangle を使ったパンくずリストを見てて、この方法だと単色はともかく、グラデーションかけたい時、ボーダーで作った三角がネックでうまくいかないだろうなっておもった。 参考記事：Breadcrumb Navigation with CSS Triangles | CSS-Tricks 前回、 iPhone Buttons を再現した際に使った方法でグラデーションかけられそうなので試してみた。 オリジナルの詳しい解説は既にコリスさんにありますので割愛。 大分書き進めた後に気づいたけど、コメントにあった span を使う方法のがパッと見簡単やないかな……こっち使うほうがいいかもしれんね…… 動作確認 Chrome(7.0.517.41) で確認。もしかすると、ウィンドウ幅が小さいと崩れるかも。横幅 1024px で最大化して確認してます。 同じ webkit の Safari でも
ウェブページのサイドバーに生じる空きスペースの活用方法
ページのデザイン時に悩むのが、2カラムレイアウトなどでサイドバーにどのくらいのコンテンツを配置するのか、というのがあります。 理想的なのは、メインとなるコンテンツと同じくらいの高さになるのが無駄もなくいいかもしれません。しかし、メインのコンテンツ量が決まったものではなく、しかも長い場合はサイドバーに未使用のスペースが多く生じてしまいます。 [ad#ad-2] この無駄になってしまう空きスペースの解決方法の一つとして、スペースの量に合わせてダイナミックにサイドバーのコンテンツを配置する方法を紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
見栄えが良くなるPhotoshop簡単テク
