Super Crowds inc.Super Crowds inc. is a creative firm located in Tokyo, where unique talent with various skills gather to create.
動きとレイアウトがイケてるWebサイト5選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ デザイナーのタリーです。 僕は1日1サイト、その日、自分なりにいいと思ったサイトをストックしています。いいものを見る癖をつけることで、日々のデザインのクオリティーにもつながってくると考えるからです。 今回は日々のサイト収集したものから、動きがあることでデザインが映えるサイトをご紹介いたします。 それでは行ってみましょう！ おすっ！ 201° インテリア・建築のデザインを手がけるDRAFTが新たに立ち上げた、プロダクトブランドのサイトです。 スクロールの動きに合わせて画面全体のレイアウトが変化します。 スクロールで画像が収まっていくような動きで、サイトの世界観を表現しています。 スクロールスピードをあえて抑えることにより、 写真1枚1枚に目が行き届くようになっています。 https://201d.jp/ SUPERCROWDS Webデザイン、UI・UX設計、CI・VIデザイン
【jQuery】斬新な動きのスライドショーが魅力の［Fullscreen Slit Slider］の使い方
投稿日：2015年10月25日 更新日：2015年10月25日 JavaScript, jQuery 2275文字：約4分 ONZE 株式会社 オンズ ONZE https://on-ze.com/archives/3615 今日は大胆な動きのスライドショーが魅力のjQueryプラグイン［Fullscreen Slit Slider］を紹介します。 まずは実際に［Fullscreen Slit Slider］を使ったサンプルをご覧ください。 実装サンプル：ONZE Fullscreen Slit Slider こちらのサンプルではカスタム仕様で「フルスクリーン対応、」「2.5秒ごとに自動再生」「キーボードの左右でスライダーを制御可能」にしています。 スライダーが切り替わるタイミングで上下左右に大胆なスリットが入り、ダイナミックな動きで次のコンテンツが表示されていきます。 見ていても気持ちイ
もう逃げない。HTMLのviewportをちゃんと理解する
<meta name="viewport" content="width=device-width,initial-scale=1"> と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返す
コンタクトレンズのWAVE（ウェイブ）
コンタクトレンズは高度管理医療機器です。必ずご購入前に眼科医の検査・処方を受けてからお求めください。 ご使用の前に必ず添付文書をよく読み、眼科医の指示を守り正しくご使用ください。 ©WAVE All rights reserved
CSSすら不要！detailsとsummaryタグで作る簡単アコーディオン
2018年11月14日 CSS, HTML 長い文章や補足説明をアコーディオン（折りたたみ）にしたい時ってありますよね。そんな時に使える details と summary タグを紹介します。CSSなしでも実装できますが、CSSを加えてより素敵な表現をする方法も挑戦しましょう！ detailsとsummaryタグの基本的な使い方 details タグで囲んだ部分がアコーディオンとして設定されます。その中に summary タグで最初から表示させておきたい部分を囲めば完成！ summary タグの部分をクリックすると、詳細文が表示されます。 HTML <details> <summary>Adobe Photoshop</summary> 画像編集ソフト。写真やイラスト、3Dアートワークの作成、webサイトやモバイルアプリのデザイン、動画編集や描画などはPhotoshopで。 </detai
ワイヤーフレーム、モックアップ、プロトタイプの違いとは？ | POSTD
開発者と仕事をしていると、スケッチ、ワイヤーフレーム、モックアップ、プロトタイプといった用語をよく聞くかと思います。しかし、あなたはこうした用語の意味を本当に理解しているでしょうか？ ワイヤーフレームやプロトタイプは、それぞれどんなときに利用するのか、知っていますか？ まず、アプリの構築を始める前に、スケッチ、ワイヤーフレーム、モックアップあるいはプロトタイプからスタートするべきだという理由を見てみましょう。 構築したいものがどんなものか、ブレインストーミングをしたり考え出したりするため。こうした作業により、あなたの期待するものが明確になる。 開発者にかかる費用を節約し、構築に必要なものを明らかにすることができる。 こうした作業の結果は投資家や最初の顧客、共同設立者に提示する目的で使える。 顔を突き合わせることのない開発チーム とコミュニケーションを取るためには、これらの用語を正しく区別し
Googleマップのお手軽カスタマイズできる「Styled Maps Wizard」の使い方 | Page 2 of 3 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
STEP2. パーツ毎に変化をつけよう 画面左の Selectors でスタイルを選んだら、画面右の Map Style の「Add」ボタンをクリックします。 そうすると先に設定したスタイルが記録され、別のスタイルを追加できるようになります。 これを繰り返してオリジナルのマップスタイルを作りましょう。 カスタマイズの例 カスタマイズの例をみてみましょう。 線路を消す Feature type＞transit Stylers＞Visibility＞Off 住所表示を消す Feature type＞Administrative Stylers＞Visibility＞Off ランドマークを簡易表示にする Feature type＞Point of Interest （POI） Stylers＞Visibility＞Simplified 一通表示を消す Feature type＞Road Elem
2017年用、日本語のフリーフォント259種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 | コリス
個人や商用で無料利用できる、日本語のフリーフォント260種類を紹介します（公開時より、2つ追加）。 ビジネスからプライベートまで、幅広く利用できるフォントが満載です！ 毎年まとめていますが、去年は219種類だったので、大幅に増えています。無料でなくなったフォントや配布終了になったフォントもいくつかありました。 初紹介のフォントから既存フォントも改めてリンク・ライセンスを確認しています（※情報はこの記事の執筆時のもの）。ライセンスはWebデザインだけでなく、同人誌や印刷物などでの利用も明記。 最新版を公開！フォントの数が大幅に増えています。 2020年用、日本語のフリーフォント 417種類のまとめ フォント紹介の前に各フォント制作者からのお願いごと。 フォントを利用の際には、利用条件やライセンスを必ず確認して守ってください。 まずは個人的に、今年一年かなり使用したフォントからご紹介。 3種類
トップページ
WEBメディア「haconiwa」は、 2023年3月1日をもちまして、 日々の更新を終了いたしました。 長きにわたりご愛読いただき、そしてたくさんの応援をありがとうございました。 （過去コンテンツは引き続きご覧いただけます。） 【お知らせ】2023/3/1をもちまして、記事コンテンツ更新停止いたしました 新世代クリエイター126名を紹介！haconiwa編集の書籍『U35つくるひと事典』10月24日発刊 【お知らせ】2023/3/1をもちまして、記事コンテンツ更新停止いたしました 家具が動く、新しい暮らし。最先端AIを搭載した家庭用自律移動ロボット「カチャカ」 クリエイター必見！契約に関する情報をわかりやすくまとめた「フリーランス アーティスト・スタッフのため… 長く大切に使いたくなるプラスチック製品を。機能とデザイン性を兼ね備えたインテリアブランド「soem」
なんとなく白にしてない？Webサイトの背景色の引き出しを増やす、9つの具体例 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、まきこです。 アンジュルムの佐々木莉佳子ちゃんがとてもかわいいので、毎日がだいたい楽しいです！ さて、みなさんは、サイトの背景色ってどれくらい気にしていますか？ わたしは、なんとなく白を選んで置きにいってしまうことが多いんですよね……。でも、もっと幅広い表現のために、背景色の使い方の引き出しを広げたいなーと最近は考えています。そこで今回は、背景色の使い方が印象的なサイトを、使い方ごとに分類してご紹介します！ 強めの色を大胆に使う 1. heyblend http://www.heyblend.com/ アメリカのクリエイティブ集団のサイト。 背景色に赤を大胆に取りいれていて、かっこいいですよね！ 赤といっても少し白が混ざったような色で、大人っぽいスタイリッシュな雰囲気にまとまっています。下層ページも潔く赤いんですが、写真とぶつかることなく、うるさくないのにしっかり個性的。こうい
2015〜2016年のWebデザイントレンドまとめ（後編） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの藤田です。 前回のトミーの2015〜2016年のWebデザイントレンドをまとめた記事はいかがでしたか？ 8. ページの非同期遷移 http://www.jeanphilippenuel.com/ 2015〜2016年のトレンドと言われて真っ先に思いついたのが、ページの非同期遷移です。 ページ遷移のたびに共通要素を読み込まなくてよいため、通常よりも早い画面遷移をおこなうことができるという利点と、画面遷移に切れ目がなくなるので、ユーザーによりリッチな印象を与えることができます。 もはや、オシャレなサイトでこちらの技術を使用していないサイトを見つける方が難しいとも言えますね！ 9. ローディング〜メインビジュアルのリッチなアニメーション演出 https://dena.com/running/ ローディングもさることながら、ローディング完了時のメインビジュアルのアニメーショ
【jQuery】もっと見るボタンで要素を開閉する方法｜Gimmick log
公開日：2015.11.20 更新日：2023.03.19 jQuery, アコーディオン もっと見るボタンを押下して、非表示要素をスライドダウンで表示させます。 読み込みは行われているので、処理が早くなるわけではないのですが、ニュースサイトなど情報量が多いサイトの場合はこういった方法が使えます。 もっと見るボタンクリックで透過させた部分をスライド表示する方法 文章が多めのニュース記事なんかでよくある見せ方ですね。 テキストの一部をCSSのグラデーションで覆って、続きがあることを明示しています。 サンプル See the Pen もっと見るでスライド表示 by ponzu (@ponzu) on CodePen. html <div class="content-wrap animated"> <div class="content-txt"> <p>この中にもっと見るで表示させたいテキス
プロデザイナーから学ぶ、ウェブサイトを良くするために心がけたい15個のポイント
デザインのキャリアをはじめるとき、良いアプローチのひとつとして基本デザイン原則を学び、そしてそれらをうまく使い、きちんとした土台を今後のプロジェクトのために作ってみましょう。 Image Source: Jared Granger 制作を通じてノウハウを知ることで、より多くのテクニックを学び、自分の予想を超えた良いアイデアを作成できるようになるでしょう。プロのデザイナーから学ぶことは、ウェブデザインのスキルを改善するのにもっとも最適な方法といえます。今回は、ウェブデザインを改善する15個のテクニックを見ていきましょう。 詳細は以下から。 01. 憧れのデザイナーを追いかけよう。 デザイナーによって好みのデザインレイアウトやエフェクト、コンポーネントは違うもので、それらを真似してみましょう。すごいと言われるアーティストでさえも、最初はここからはじめています。まずは通らないわけにはいかないでし
IEでも再現可能！簡単にエフェクトがきいたホバーボタンを作る方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです。 今回CSS3で実装されたCreative Button Styleエフェクトが素敵だったのでjQueryで再現してみました。 実装の仕方をご紹介いたします✌(´ʘ‿ʘ｀)✌ HTMLとCSSの準備 今回jQueryで実装するために修正をいたしました( ˘ω˘) HTML HTMLは参考サイトをそのまま使用します( ˘ω˘) <button class="btn btn-1 btn-1b">Button</button> CSS CSS3独自のtransition要素を削除して、ホバーはjsで実装するため削除をしました。( ˘ω˘) 参照元 .btn { border: none; font-family: inherit; font-size: inherit; color: inherit; background: none; cursor: pointer; paddin
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
カーテン、というかシャッター？みたいにページが切り替わるJS | スターフィールド株式会社
Redirecting to Animate.css
サイドグローバルナビ | ARTNOC.COM
50%OFF：かくれた人を探す大人向けパズル「Hidden Folks」ほか［11月6日版］セール・お得情報
torico.