ノンデザイナーでもイケてるLPを作成する方法 - Qiita
はじめに イケてるは誇張かもしれませんが社内にデザイナーがいなく、 エンジニアにランディングページを作ってと振られたときのケースを想定して ノンデザイナーでも体系的にCSSコーディングすることでそれっぽいランディングページを作成できることを目的としてます。 デザインは一朝一夕でできるものではなく、ブランディングに関わる部分の画像に関しては、商材の撮影やPhotoShopやIllustratorで専用のアイコンやロゴ画像を別途制作する必要があります。 本格的に作成する場合はやはり本職のデザイナーさんに依頼した方が良いでしょう。 （それっぽいといったのは今回はそれらのブランディングに関わる画像の作成を省いて、素材画像やCSSでごまかしているからです。） 今回はCSS Designerという仮想CSSエディターの商材を想定してランディングページを作成しました。 作ったページ全体のサンプルはこちら
非デザイナーがナメられないための、おすすめデザインツール12選
僕は非デザイナーですが、こちらの考えにとっても共感します。 ブログにしても、アプリにしても、イベントにしても、良いコンテンツは世の中にもういっぱい溢れていて。 本気度を示し、他ではなく私たちのコンテンツを選んでもらうために、デザインにこだわるって大事だなって考えています。 おしゃれなものを作らなければいけない、と言うわけではないと思います。 使ってもらいたい・届けたい人たちに寄り添い、作りたい世界観を伝えるためのデザインにすること。 相手視点を持った思考が大事なんじゃないかなって思います。 『わかる！だけど実際難しいんだよ！』 という非デザイナーの方々に向けて、同じく非デザイナーの僕がお気に入り登録して愛用しているツールをシェアします。 有名どころも多いですが、もしご存知ないものもあったら触ってみてください。
みんなが使いたくなるオンラインショップの作り方まとめ
by Louish Pixel オンライン通販サイトやアプリがモバイル端末に最適化されていなかった場合、約30％のユーザーが購入前に商品を見るのをやめると言われています。eコマースを行うウェブサイトやアプリにとって、モバイル端末上における商品ページの「ユーザー体験」が死活問題となってくるわけですが、小さなスクリーンに適切な表示を行うのは非常に難しいことです。そこで、ソフトウェア開発者のNick Babichさんが、自分の経験からわかった「購入に結びつきやすい商品ページ」の作り方をまとめています。 Mobile eCommerce: Product Details https://uxplanet.org/mobile-ecommerce-product-details-28feba377a55#.ben2wxbjq ◆1：商品情報や取り得る選択肢を詳細に記載すること 情報を包括的に記載する
矩形レイアウトを超えた !? - CSS Shapes で Web のレイアウトはもっと自由になる | Recruit Tech Blog
Can I use... Support tables for HTML5, CSS3, etc そんな訳で、現状は Webkit エンジンを搭載しているブラウザのみ対応しているようです。まだまだ実用段階とは言い難いですが、一足先に最新の機能を知っておいて損はないでしょう。 はじめての CSS Shape Circle まずは一番簡単なものからということで、円形の要素に沿って回りこませる方法を試してみるとします。やり方は簡単で、要素にshape-outsideというプロパティを適用するだけです。 .element { -webkit-shape-outside: circle(50% at 50% 50%) border-box; shape-outside: circle(50% at 50% 50%) border-box; float: left; } shape-outside プ
ResponsifyJS - 画像の表示をレスポンシブに変化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました レスポンシブコンテンツの中で最も扱いづらいのは画像と言えます。バイナリファイルであるために画面の大きさに関わらず同じサイズですし、画面幅の変更に対してレスポンシブに変化することができません。 そこで使ってみたいのがResponsifyJSです。画像をレスポンシブにするjQueryプラグインで、単に縮小されてしまう表示とは一味違った演出が見ものです。 ResponsifyJSの使い方 ResponsifyJSを使った例です。これは普通の表示です。 画面幅を変えました。写真は小さくなりましたが、メインとおぼしき部分の大きさはほとんど変わっていません。 実際にブラウザのウィンドウを動かしてみると、画面幅に応じて画像の内容が若干動いているのが分かるはずです。 ResponsifyJSは画像
How to Create a Simple Multi-Item Slider | Codrops
A tutorial on how to create a simple category slider with a minimal design using CSS animations and jQuery. The idea is to slide the items sequentially depending on the slide direction. For today’s tutorial we want to show you how to create a simple item slider with CSS animations and some jQuery. The idea was inspired by the Aplle product slider where several little items fly in with a bouncing a
jQueryで1ページごとにスクロールして画面遷移させるUIを実装する方法｜BLACKFLAG
以前、iPhone5sのプロダクトページがリリースした頃に『簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」』と題して1ページをフルスクリーン表示にして、画面全体をスクロールさせることで、1ページ分（1コンテンツ分）を画面遷移させるUIを実装できるjQueryプラグインを紹介しましたが、自分なりにもっと使いやすい形で実現できないかやってみた実験をご紹介してみます。 【2014/08/05 追記】 各ブロック内での横スライド機能を追加しました。 まずは動作サンプルから。 下記のサンプル画面でマウスホイールスクロールもしくは画面右側のナビゲーションボタン等を使って画面（ページ）を切り替えてみてください。 「jQueryで1ページごとにスクロールして画面遷移させるU
魅力的なデザインフレームワークを探そう。2014年以降に登場したUIフレームワークまとめ MOONGIFT
今回はWeb用のUIフレームワークまとめです。UIフレームワークは数多く登場しており、それぞれに特徴が出始めています。用途が限られていたり、特定のJavaScriptフレームワークと一緒に使う想定のものも多いです。 フレームワークに合わせて選んでも良いでしょうし、マテリアルデザインのようなトレンドに合わせて選んでも良いのではないでしょうか。 EmberUI - Ember.jsを使ったWebアプリケーション用UIコンポーネント集 あなたがWebアプリケーションを開発する際に使っているJavaScriptフレームワークは何でしょう。小さなものであればjQueryが良いかも知れません。が、より大きくコード量が増えていくともっと大型なフレームワークを必要とするはずです。Ember.jsはその有力な選択肢の一つです。そしてそこにEmberUIを組み合わせるとより強力なツールになります。UIコンポー
テレビだけじゃない！Webに力を入れている有名人の公式サイト26選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。制作部ディレクターの鮫島です。 皆様は普段、芸能人やタレントのサイトを見ることはありますか？ 恐らく、その人のファンだったら更新情報を見たり、アーティスト系だったら過去の作品見たりすることが多いんじゃないかと思います。 僕自身もそうなのですが、ふと「有名人のサイトって、どんなものがあるんだろう？」と気になったので、色々調べてみました。 その中でも、デザインや世界観が印象的だった有名人のサイトを国内・国外・番外編に分けてまとめてみました。 日本の有名人編 森山直太朗 http://naotaro.com/ 国民的名曲『さくら』でお馴染み、森山直太朗さんの公式サイトです。 全体的にモノトーンカラーで、フォントの使い方などが上手く、スタイリッシュな印象でした。面白いのはスクロールの演出で、スクロールという特性を上手く活かしている作品だと思います。 ちなみに、僕のカラオケ十八番は森山直
クリエイター・デザイナーのためのポータルサイト - クリエイターズバンク
EVENT PickUp 開催中・近日開催のクリエイターイベントをピックアップ！ 近日開催！開催まであと22日 東京都 2024/8/7(水)〜2024/8/10(土) ARTs*LABo 小さいテーマ展『浴衣・祭り・金魚』 イラストレーション "浴衣、祭り、金魚"と言うキーワードから、作家さんが自由にイメージしたオリジナルの作品を展示します。 かつて自由が丘のOne'sさんで開催していた浴衣会(浴衣テーマ)に、夏らしい"祭り&...
クオリティが高い縦に長いサイトを厳選して集めています MUUUUU_CHANG WEB DESIGN SHOWCASE
縦長のwebデザインをがむしゃらに集めています。
Tsuyoshi Kusano Design Co., Ltd.
2003年設立。グラフィックデザインを中心に、映像、ファッション、WEB、プロダクトと幅広い分野のアートワークを手掛ける。メンバーは草野 剛、野中 愛、阿閉 高尚、近藤 ひろ、林 弘樹、髙山 彩矢子、佐野 ゆかり、多賀 万里子、杉山 絵、藤田 峻矢、永井 智大、井上 寛、菅沼 彩菜、西山 愛香、濵田 郁。
Twitterのブランドガイドライン | about.twitter.com
<path opacity="0" d="M0 0h24v24H0z" /> <path d="M17.207 11.293l-7.5-7.5c-.39-.39-1.023-.39-1.414 0s-.39 1.023 0 1.414L15.086 12l-6.793 6.793c-.39.39-.39 1.023 0 1.414.195.195.45.293.707.293s.512-.098.707-.293l7.5-7.5c.39-.39.39-1.023 0-1.414z" /> </svg>" data-icon-arrow-left="<svg width="28px" height="28px" viewbox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://ww
レスポンシブサイトでパララックス効果をCSSだけで実装する方法 - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
最近、パララックス効果（視差効果）を取り入れたサイトを目にするケースが増えてきています。ECサイトの場合、商品ページにパララックス効果を取り入れる必要性はそれほど高く無いかもしれません。 しかしLP（ランディングページ）の見せ方として、パララックスさせることで工夫次第で、人を惹きつけるページを作成することができます。 パララックス効果を持たせるには、javascriptによる実装がよく使われています。しかし今回ご紹介する方法は、javascriptは一切使わずにCSSだけで、しかもレスポンシブサイトにおいても簡単にパララックス効果を実装できてしまう、そんな方法をご紹介します。 パララックス効果とは パララックス効果とは、日本語で訳すと「視差」効果と訳すことができます。 同一点を異なった2点から眺めたときに見える方向の違い，すなわち，二つの方向の間の角度を視差という。 参考：コトバンク WE
Circle Hover Effects with CSS Transitions
CSS transforms are not supported in your browser CSS transitions are not supported in your browser Sorry, only modern browsers.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iPhoneデザインボックス
Demo of Caption Hover Animations
Hover Effect Ideas | Set 1
iHover CSS3 hover effects pack
http://www.ist-ism.com/weblog/material/614.html