日本のWebデザインで見かける10個の特徴
ここ数年で、日本のWebデザインは大きく進化しました。 洗練されたデザインといえば、海外のものでしたが、今では日本でも数多く見られます。 デザインのスタイル、芸術的アプローチ、高度なソリューション、そして漢字や縦書きの文字を使ったデザインなど、日本のWebデザインで見かける10個の特徴を紹介します。 10 Distinctive Features of Japanese-Style Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ハイテクな演出 02. 他とは異なるソリューション 03. 日本独自の配色 04. 縦書き 05. 自然の風景 06. 巧妙なヒーローエリア 07. アニメに影響を受けたイラスト 08. キャラクター 09. 日本の漢字 10. 日本の伝統的な音 01. ハイテクな演出 W
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
フォトショップで写真の色を置き換える７つの定番テクニックまとめ
フォトショップでの写真の色の置き換え、変更は特に要望の多い重要なテクニックのひとつです。 しかし、用途に応じてツールを使い分け、色の置き換えを行っているひとは、どれだけいるでしょう。 今回は、どんな写真にも応用できる、色の置き換え・変換のお手軽Photoshopテクニックを、実践のデザインサンプル例と一緒にまとめてご紹介します。 これらの方法を試してみることで、どんなデザインでもお手軽に色の置き換えを行うことができるようになります。 コンテンツ目次 色を変換・調整する方法 特定の色だけを置き換える方法 「モデルが着用しているドレスの色を変更したい。」 「車の色を背景に合わせて変更したい。」 「白色のドレスの色を変更したい。」 「背景の壁の色を変更したい。」 「ブランドカラーに合わせてソファーの色を変更したい。」 さいごに、 どんな写真にも応用できる、色の置き換え・変換のお手軽Photosh
保存しておくと便利！CSS Flexboxでよく使用するコードがまとめられたCSSのスニペット集 | コリス
ヘッダでロゴを左寄せにしたり、検索窓を右寄せにしたり、画像をページの中央に配置したり、ページ上のあらゆる要素を揃え整列させるFlexboxをベースにしたスタイルシートのスニペットを紹介します。 サイトやブログの全体で利用できるユーティリティのclassとして、保存しておくと便利なスニペット集です。 Speed up alignment in CSS with Flexbox utility classes by CodyHouse 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSで面倒なのは要素を整列させること Flexbox以前 Flexboxで簡単に CSSで面倒なのは要素を整列させること CSSで面倒なのは、要素を整列させることでした。しかし、Flexboxが登場して、理にかなった方法で整列させることが可能になりまし
JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現 | Webクリエイターボックス
2018年8月6日 JavaScript, jQuery Webサイトのアクセントに、ちょっとした動きをつけたい時ってありますよね。一から作り込むのは大変ですが、プラグインを使えば意外と簡単に実装できますよ。夏らしい涼し気なデザインになりそうです。サンプルがうまく動かない時はデモ画面右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてください！ ↑私が10年以上利用している会計ソフト！ wavify See the Pen wavify Demo by Mana (@manabox) on CodePen. GitHub wavifyはjQueryのプラグイン。ふよふよと動く波を表現できます。jQueryとTweenMax、wavifyのファイルを読み込み、SVGコードを用意すればOK。 HTML <body> コンテンツ ・・・ <!-- SVG --> <svg
デザイナーにおすすめのChrome拡張機能まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは デザイナーのミライです。 ジャスの意味がわかるやつは大体友達。 今回はデザイナーにオススメしたいChrome拡張機能を紹介します！ みなさんの日々の業務が、便利なツールで心地よくなりますように。 ※ 導入方法や詳細な使用方法などは、本記事では割愛させていただきます。 01.デザインに役立つやつ Muzli 2 – Stay Inspired デザイン系の情報を集めるならMuzliです。「新しいタブ」で Muzliを毎日見ていればトレンドを追い続けることができそうですね。「dribbble」「Award系のサイト」「クリエイティブ系のブログ」などからの情報が表示されています。 Chrome ウェブストア 提供サイト ColorZilla サイトから色を抽出できる、カラーピッカーです。 抽出しヒストリーを保存してくれたり、1箇所だけでなくページ全体から抽出できる機能があったりして、
「Brain Dots」の模倣アプリは付き合いのある広告プラットフォーム企業によって支援されていた・・・ - matsukaz's blog
こんにちは、株式会社トランスリミットCTOの松下です。 先日、弊社代表の高場が以下のツイートをつぶやきました。 Brain Dotsのクローン「Love Balls」について、利害関係のため沈黙していましたが、当事者から公表されたので、一言コメントしておきます。 顧客に本家がありながらパクリを支援して、かつ成功事例に上げれるとは、どんな神経してるの？儲かればOKみたいな？ちと残念でした。https://t.co/hD0p6hFwPh— 高場大樹 @Translimit,Inc (@hiroki_takaba) 2018年7月13日 また高場のツイートを見たTechWave様も、以下の記事を上げてくださいました。 普段は技術的な内容中心のブログですが、今日は株式会社トランスリミットのメンバーとして、本件に関して思うところを書きたいと思います。 模倣問題はアプリやゲームに限らない話だと思います
Bootcomp｜Bootstrap × Photoshop CC 2015 エクステンション
�10倍ラクするデザインカンプ制作 Photoshop CC 2019に「Bootcomp」を導入すればWebサイトやアプリのデザインカンプ制作にかける時間を大幅に短縮することが可能です。 ダウンロードする フォーマット作成 Webサイトやアプリのデザインをスタートする際にまずはレイアウトのガイドを作成するなど事前準備に時間がかかっていました。 Bootcompを使えば１クリックでフォーマットが瞬時に作成されるのですぐにデザイン作業をスタートさせることができます。 画像挿入もワンストップ シェイプを作成してクリックするだけで画像挿入〜リサイズをワンストップで行うことができます。画像がまだ未定の場合は画像挿入をキャンセルすれば自動でダミー画像が挿入されます。ぶっこみ機能を使用すれば大量の画像もあっという間に配置することができます。
CSSの作業をもっと楽に！無料で使える便利なWebツール40選
CSSを使って作業をいているときに活用したい、無料で使えるオンラインツールをまとめてご紹介します。これらのツールは、制作時間を節約、短縮できるだけでなく、CSSのちょっとややこしい問題の解決ツールを想定し作成されています。 CSSをベースとしたアニメーション、レスポンシブに対応したナビメニュー作成ツール、パイチャート作成、CSSの圧縮やユニークなサークル型メニューの作成などさまざまなツールが揃っています。制作に困ったときに読み返してみてはいかがでしょう。 超便利！確認しておきたい最新CSSツール、リソースガイド 2018年度 CSSの作業をもっと楽に！無料で使えるオンライン便利ツール40選 Flexbox Parent Attribute Visualizer CSS Flexbox のプロパティを実際に変更しながら確認できるインタクラティブな方法。 Keyframes.app CSSアニ
gondaba.com
Color Shades Theme Released! Hey! You like how gondaba.com looks? Yeah, me too! Well, now y'all can use the theme too! I’ve just submitted it to the theme garden, and it’s been accepted! Just hit Customize, then Theme at the top. Then find mine, and click save! You’re all set. Customization HintsIn Customize, hit ‘Appearance’ to change the default colors.To change all the themes in the fancy slide
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
株式会社ユニバースの制作チームがお届けする WEB技術ブログ「ゆにメモ」
Webデザイン制作・Webサービス・Webデザインレッスン :: Stocker.jp
Hayakawa Books & Magazines（β）
NaeNote | Life Be Nice And Easy
Design notes
GRID: A simple visual cheatsheet for CSS Grid Layout
WinningWP - Tips, tricks and resources for people who love WordPress!
Basic Design Note
SONICMOOV LAB ( ソニックムーブ ラボ )
Tumblr: Sign up