私たちはshopifyパートナーとして、オンラインショップの構築を得意としています！ shopifyなら安く、そして簡単にオンラインショップを開設することができます。
株式会社デモ - 御社の「最高」を目指して。
私たちはshopifyパートナーとして、オンラインショップの構築を得意としています！ shopifyなら安く、そして簡単にオンラインショップを開設することができます。
[CSS]背景は固定、美しいブラーがかかった半透明のパネルやサイドバーやボタンを実装するスタイルシート
背景画像は固定表示で、美しいブラーがかかった半透明のパネルやサイドバーやボタンがスクロールするコンテンツを実装するスタイルシートのアイデアを紹介します。 例えばパネルをクリアにして、背景をブラーにするなど、反転させてみるのも美しい見た目になります。 .blur-container.blur-8 { --bg: url(background.jpg); overflow: hidden; background-image: var(--bg); } .blur-container.blur-8::after { background-size: cover; background-position: center; background-attachment: fixed; opacity: 0.8; -webkit-filter: blur(6px); filter: blur(6px);
![[CSS]背景は固定、美しいブラーがかかった半透明のパネルやサイドバーやボタンを実装するスタイルシート](https://cdn-ak-scissors.b.st-hatena.com/image/square/fd057f6b3e7535c99e31d0c606db378bb2b2e215/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201701%2F2017021304-08.jpg)
配色の参考！美しいCSSグラデーションカラーを集めたギャラリーサイトuiGradients
カラーリング、配色の参考にしたい美しいCSSグラデーションカラーをあつめたギャラリーサイトuiGradientsが、個人的にデザイン制作で役に立ったので、備忘録的エントリーとしてご紹介します。 画面いっぱいに表示されるスライダーから、お気に入りのグラデーションカラーを見つけたら、画面左下に表示されている「Get CSS Code」をクリック（Enterキーを叩くキーボード操作も可能）。CSSコードが表示されるので、「Copy to Clipboard」でコピー完了です。 デイ・トリッパー（Day Tripper）やモヒート（Mojito）、ジューシー・オレンジ（Juicy Orange）などネーミングも素敵ですよ。
ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ
ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているのか、いくつもの記事を読んだことがあるでしょう。（この問題の参考にしたい記事はこちらやこちら、こちら、こちらからどうぞ。） 幸いにも多くのサイトやアプリで、より効率的な解決法となる代替アイデアが試されています。今回紹介しているアイデアは、他のものより優れているというわけでなく、コンテンツや内容によってパフォーマンスや実行できるかどうかは変わってきます。 01. タブ型ナビゲーションメニュー もしウェブサイトやアプリの項目が限られている場合、ユーザーはできるだけ素早くそカテゴリを切り替えたいところ。そんなときは、タブ型ナビゲーションが良い解決方法となるでしょう。 タブはもっともシンプルなナビゲーションパターンですが、デザインを制作す
Webサイトからプッシュ通知を送ろう！ JavaScriptでのプッシュ通知の実装方法 - ICS MEDIA
スマートフォンアプリではおなじみのプッシュ通知ですが、ウェブサイトからもプッシュ通知できることをご存知でしょうか？ JavaScriptのServiceWorkerとPush APIを使用することで、ウェブサイトからでもスマートフォンアプリと同様にユーザーにプッシュ通知を送ることができます。また、モバイルだけでなくデスクトップでも通知を行うことができるため、ユーザーエンゲージメントの向上の手法として有効です。 プッシュ通知のデモ プッシュ通知を行う簡単なサンプルを用意しました。Chrome 42以降のブラウザで確認してください（2018年3月現在のChrome 65で動作することを確認しています）。 「プッシュ通知の配信設定」のトグルを選択すると、「cURLコマンド」のボックスにコマンドが生成されます。このコマンドをMacをお使いの方はTerminal上から実行してください。Windows
ローディングGIF画像と便利な作成ツール16選
Webサービスを利用するユーザーに対して、読み込み中と分かりやすく伝えるローディングGIF画像は重要な存在です。コンテンツが読み込み中であることを伝えなければ、なんらかの不具合であると勘違い、あるいは気付かずに離脱してしまう可能性があるからです。 今回は、そのまま使えるローディングGIF画像、簡単に画像生成ができる便利ツールをまとめてご紹介します。今すぐ画像を使いたい方はもちろん、自作で画像を用意して使ってみたいと思っている方もぜひ参考にしてください。 ※素材数などの情報は2016年4月8日時点のものです。今後変更となる可能性がありますのでご了承ください。 フリーのローディングGIF画像 1.フリーデザイン素材「 ローディングのくるくるアニメーションGIFがいっぱい -｜PIXEL LAB http://www.pixelimage.jp/blog/2012/04/loading_icon
Belajar Bahasa Inggeris Online 2022 (Kelas English 1-to-1)
Kalau anda teringin nak fasih English, boleh belajar Bahasa Inggeris online dengan kami. Kelas dijalankan menggunakan Zoom / Google Meet. Kelas Bahasa Inggeris Online Ini Khas Untuk Orang Dewasa Yang Faham English, Tapi Bila Speaking: Ayat Berterabur, Grammar Hancur Dalam proses nak fluent English, kenapa mesti malu? Kami di JomEnglish Academy faham, anda nak sangat cakap smooth dan rasa confident
【CTA】大公開！ユーザーを惹きつけるメリット18のアイデアと60の代表フレーズ | UI改善ブログ by f-tra
CTAでユーザーに行動を喚起するときには、そのアクションを取ることでユーザー自身にどういったメリットがあるかどうかを提示する必要があります。 本日は、具体的にどのようにメリットをアピールすればよいか、その方向性やフレーズをご紹介したいと思います。 ご紹介するのは、以下18パターンのメリットの提示方法です。これらは大きく5つのタイプに分けることができます。 ユーザーに提示するメリットのパターン一覧 お得さをアピール 無料 トライアル、お試し 割引 送料無料 緊急性を提示する 数量限定 タイムリミット 商品のよさをアピール 心地よさ・便利さ クオリティ 作り手、熟練 オンリーワン ソーシャルプルーフを提示する 人気・話題性 利用状況 満足度 その他定量的メリット 付加サービスをアピール サポート スピーディ プレゼントを提示する プレゼント 抽選 以下、順番に説明していきます。またそれぞれ具体
日本語のタイトルやロゴデザインの幅を広げよう！知っておきたいアイデア13個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのまきこです。 ずっと応援してきたアイドルの方が年末にグループを卒業してしまうとの発表をうけて、木枯しが一層つめたく感じられる今日このごろ。失恋のような胸のくるしさをデザインの糧にしない手はないと言い聞かせつつ、日々業務に励んでいます�。 さて、話題は変わりますが、日本語のタイトルやロゴをデザインするのって、むずかしいですよね。漢字やひらがな、カタカナが混じっていると統一感を出すのが難しかったり、アルファベットよりも形状が複雑なので、パスをいじってバランスをとるのに四苦八苦したり……。 そこで今回は、日本語のタイトルやロゴをデザインするときにヒントになりそうな、ストックしておきたいアイデアを一気に13個ご紹介します。できるだけ多くのパターンを出してデザインの候補の幅を広げたり、「こっちの方向で行こう！」と思えるカタチまですばやく到達したいときのためにストックし、役立て
Webページのレイアウトに役立つ20のデザインテクニック
ページのレイアウトをする時に全てが同じ大きさ・形・色だと、それは非常に退屈なデザインになってしまいます。要素を整理し、階層をつくり、重要な箇所にフォーカスがあたるようにするにはコントラストを効果的に使うことです。 レイアウトにビジュアルの興味を加え、デザインを生き生きとさせるコントラストの使い方を紹介します。 色の値(value)とはカラーの明るさや暗さをあらわす用語で、ピュアブラックとピュアホワイトに最もコントラストがあります。だからといって高いコントラストのデザインをつくるために、白黒のカラーパレットにこだわる必要はありません。簡単な方法の一つは、そのカラーからより明るいカラーと暗いカラーをつくり、コントラストを加え、あなたのデザインの特定の場所を目立たせることができます。 シンプルな例として、下記のような暗い背景に明るいテキストは効果的にコントラストをつくっています。背景が写真で、テ
lovely ui
device: iphone / ipad / android / app icons / app store / badges / buttons / calendars / capture / coach mark / comments / compose / count / detail / empty states / feed / graphs / home / icons / launch screen / list / login / maps / media player / navigation / notifications / popovers / profile / search / settings / share / stats / walk throughs / trends: circles / gradients / ghost buttons / rai
Webデザインが「どこかさみしい」と思ったとき、3分で試せるアイデア7つ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのまきこです。 iPhone6のディスプレイがバキバキに割れてしまってから、心を無にしてずっと使っていましたが、iPhone6sの発売により、最近はちょっとウキウキしています。 ところで、デザイナーのみなさんは、普段作業をしているときに「このままのデザインだと、なんかさみしい�」「もっとにぎやかにしたい」と思ったことはありませんか？ そんなときは、制作物に応じた「にぎやかし」をするのがもちろん良いのですが、いろいろ難しく考えるよりも、手を動かしてみたほうが早い、ということもありますよね。ということで今回は、デザインが「なんかさみしい」と思ったときに、だいたい3分あれば試せるデザインアイデアを7つご紹介します！ ▼ デザインアイデアに詰まったときはこちらもどうぞ。
現役Web制作スタッフが選ぶデザインの参考になるギャラリーサイトまとめ33選 | ページ 3 / 4 | 東京上野のWeb制作会社LIG
こんにちは、Web制作会社「株式会社LIG」の代表取締役会長、ゴウです。 今回、LIGで働くWebデザイナーとディレクターにアンケートを取り、制作する際に普段参考にしているかっこいいサイトや、おしゃれなギャラリーサイトを集めてみました。 毎日仕事で使っている彼らのチョイスなので、かなり実践的で参考になる、かっこいい・おしゃれなサイトが集まったと思います。 全部で27個も集まったので、ジャンル別に分類もしました。それではいってみましょう！ デザインの引き出しを増やすには？ デザインの引き出しを増やすには、インプットのほかに、自分のアウトプットに対して誰かからフィードバックをもらうという方法もあります。周りに相談できる人がいなければ「スクールでの勉強」もおすすめです。 💡現役のプロからデザインを学べる「デジタルハリウッドSTUDIO ｂｙ LIG」の詳細はこちらから ※このページは、2021
Webデザインのカラー、レイアウト、エフェクトなどのアイデアに困った時に時間をかけて見たいサイトのまとめ
Webデザインのカラー、レイアウト、エフェクトなどのアイデアに困った時に時間をかけて見たいサイトのまとめ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
美しいグラデーションカラーをまとめている・「uiGradients」
How to Make Animated GIFs in Photoshop | Adobe Creative Cloud
マテリアルデザイン参考
UIデザインに役立つツール
Design Patterns on CodePen
AwwwardsやDribbble、Behanceなどの投稿をざっと見れるインスピレーション向上の為のChromeエクステンション・「Muzli」
