RAKU-GAKI
Flash Works Archives 2002 - 2011 Thanks to Flash 1996 - 2020 Macromedia & Adobe RAKU-GAKI 2002 create: Koji Nishida music: Makoto Okuda music: Tatsuya Uehira music: Void Productions 自身の個人サイト。コラージュを組み合わせ、グラフィカルな世界観で構築。彫刻を様々な角度から眺めることで表情が変わっていくという概念 つなぐ TSUNAGU 2007 client: Mitsui Fudosan Residential Co.,Ltd Executive Producer: Kazutaka Sueyoshi (Mitsui Fudosan Residential Co., Ltd.) Producer: Masay
Web制作者は要チェック！最近のランディングページで見かけるデザインやアイデアのまとめ -SaaS Pages
最近のラインディングページで見かけるデザインやアイデア、コピーライティングがまとめられたSaaS Pagesを紹介します。 ヘッダやフッタのデザイン、ナビゲーションのアイデア、CTAや価格一覧やFAQのコンポーネントなど、インスピレーションが刺激されます。
無限スクロール vs ページネーション：それぞれの特徴と使い分け
無限スクロールのメリット １．ユーザーを没頭させ、コンテンツを発見させる データ探索の主要な手段としてスクローリングを使う場合、無限スクロールはユーザーをwebページにより長く滞在させ、よりエンゲージメントを高めることができます。ソーシャルメディアの人気に伴い大量のデータが消費されている中、無限スクロールは、ページが前もって読み込まれるのを待つことなく、膨大な情報を閲覧するための効率的な方法です。 無限スクロールは、「発見」のためのインターフェースであれば、ほぼ必須の機能です。ユーザーが特定のものを探していない場合、気に入った一つのものを探すために大量のアイテムを見る必要があります。
ブランドをもっとも印象づけるロゴの配置はどこか？ | UX MILK
ユーザーがWebサイトを見るとき、彼らの視線は左を向いています。そのため右側に配置されたロゴにはユーザーはあまり視線を向けず、ブランドリコールが弱くなります。左側に配置されたロゴには多くの視線が集まり、ブランドリコールに繋がります。 中央配置のロゴはサイトトップへのナビゲージョンを邪魔する Nielsen Norman Groupは中央配置のロゴについても研究を行いました。調査によると、ロゴが左と中央のどちらに配置されるかでブランドリコールに違いはありませんでした。位置よりもロゴのコントラストや読みやすさのようなデザイン的な違いがブランドリコールに影響していました。 それだけではなく、中央配置のロゴはユーザーがサイトトップへ遷移するのを邪魔していました。左配置のロゴを比べると、中央配置のほうがユーザーが１回のクリックでサイトトップへ戻ることを失敗する割合が「6倍近く高い」ことがわかりました
商品を360度回転できる画像ビューワーを簡単に実装できるスクリプト -JS Cloudimage 360 View
商品の画像を複数枚用意することで、商品を360度ぐるぐる回転できる画像ビューワーを簡単に実装できるスクリプトを紹介します。 操作はかなり快適で、単体で動作するスクリプトです。 JS Cloudimage 360 View JS Cloudimage 360 View -GitHub JS Cloudimage 360 Viewの特徴 JS Cloudimage 360 Viewのデモ JS Cloudimage 360 Viewの使い方 JS Cloudimage 360 Viewの特徴 JS Cloudimage 360 Viewは商品の画像を複数枚用意することで、バーチャルツアーを提供できるシンプルでインタラクティブなJavaScriptライブラリです。 サポートブラウザは、IE9, 10, 11を含む、すべてのモダンブラウザです。 商品はユーザーが360度回転させることができ、拡大に
『always』サービス終了のお知らせ ｜イジゲングループ株式会社
『always』は2023年3月末をもちまして、サービスを終了させていただくこととなりました。 2019年4月1日のサービス開始以降、数多くの皆さまに『always』のサブスクリプションをご活用いた...
ウェブデザイン制作が爆速に！便利な最新オンラインツール47個まとめ
ウェブデザイナーやグラフィックデザイナーのデザイン制作をスピードアップさせる、便利な最新オンラインツールをご紹介します。 ゼロから作ると時間のかかってしまいそうなことも、これらのツールを使うことで大幅に制作時間を短縮できるツールが揃います。今後のデザイン制作のワークフローに取り入れてみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. モックアップツール 2. デザインツール 3. デザインからコードへの変換ツール 4. プロトタイプツール 5. サウンドツール 6. アイコン素材パック 7. コラボレーション、共同作業ツール 8. 面白ツール 9. フォント、書体ツール ウェブデザイン制作を爆速に！便利な最新オンラインツールまとめ モックアップツール Design Camera アニメーション付きの３Dモックアップを数秒で作
CSSセレクタのチートシート｜37パターンを一覧で解説
CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。
もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj
きっとトラブルが起きにくい！ウェブデザインの制作順序を書きました。 | バニデザノート
ウェブサイトの制作には、いくつかのフェーズがあります。 企画→制作→構築→公開を何度もくりかえすこともあり、スパイラル方式なんて言われることもあります。 今回は、ウェブサイトの制作順序を書いてみたいと思います。 むかしはこういった文章をブログなどで書く方が多く、本もたくさんあったのですが 今は知識や技術に偏ったものがおおく、目に触れることが少なくなったのかもしれません。 もしくは、あたりまえのことだから言わなくなったのかもしれません。 しかしながら、ウェブを気持ちよく制作するために基本というのは重要なことだとおもい 再確認もこめてかきました。 ウェブ制作を行なっている人、 これからウェブの業界に入りたいとおもっている人、 これからウェブを発注する予定のある企業の方に読んでいただければいいなぁと思っています。 ・ヒアリング どんなサイトにしたいのかをお客様へお伺いします。 対象となるブラウザ
GIF、JPG、PNGの違い ｜SEO Japan by アイオイクスSEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
画像を保存する際にGIFかJPG、またはPNGどの形式で保存するのかというのかウェブデザインを始めた人が最初に迷う疑問の1つですよね。正直、私もドット絵やイラストならGIF、写真やグラデが多い画像であればJPG、PNGはサイズ重視で画像の劣化を避けたい時や正直良く分からない時、、程度の知識しかない人間ですが、今回親切にもその違いを解説してくれた記事があったので紹介したいと思います。 — SEO Japan 例えば、ロゴをJPG形式で受け取ったときなど、私はいつも私の中の何かが死に絶えるような気持ちになる。実際、それは私にとって非常に大きな出来事なのだ。なぜなら、画像に適したファイル形式を選択することは、Webデザインにおいて非常に重要なことなのだから。 JPG形式の場合、画像を再保存するたびにクオリティが下がってしまうことをご存じだろうか？PNGとGIFは”可逆圧縮(ロスレス圧縮：loss
Calltoidea - Light up your imagination
If you like Calltoidea, let's trythe first community for link lovers.
レイアウト作りを簡単にしてくれるCSSグリッドシステム
CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね！ Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは？ CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし
「パララックス」をはじめとする「スクロールエフェクト」の魅力とは|コラム|株式会社マイクロウェーブ
「パララックス」をはじめとする「スクロールエフェクト」の魅力とは タグ Javascript Webサイト制作 「パララックス」はWebデザインのトレンドとして2012年頃から流行り始め、現在はこの手法を利用したサイトをよく見かけるようになりました。そろそろブームが過ぎるのでは？という意見も聞こえますが、パララックス効果を代表とするスクロールエフェクトはアイディア次第でまだまだWeb利用者たちを魅了する可能性をたくさん秘めているのです。 パララックスとは？ パララックス（parallax）、直訳すると「視差」という意味です。もともと写真用語で、光学式ビューファインダーを使う際、レンズとの位置関係のズレにより、ファインダー視野と実際に撮影される画面にズレが生じる現象を指す言葉です。Webデザインにおけるパララックスは、スクロールといった動作に応じて、複数のレイヤー（層）にある視覚要素を異なる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
株式会社LARGO（ラルゴ）| 店舗の空間デザイン・お店の内装設計・施工 | 美容室・サロン・飲食店・病院・オフィス・クリニック
UI/UXとは？知っておきたいUI/UXデザイン50の知識
Wireframe Showcase
Tailwind CSS templates - Cruip
吹き出しイラストを作成する方法（イラストレーター）
