海外ではInVisionが注目されていますが、国内産のデザインツールも負けていません。 Webサイトやスマホアプリのデザインを積み木感覚で楽しくデザインできる無料のオンラインサービスを紹介します。 こういったツールは英語だからと敬遠していた方は、是非試してみてください！ ようやく正式版としてリリースされ、以前紹介した時からさらに進化しています。 Studio Studioの特徴 Studioを使ってみた Studioの特徴 Studioは無料で利用できる国内産のデザインツールで、Webサイトやスマホアプリのモックアップ作成から、デザイン、さまざまな実機でのプレビュー、公開、そして運用や解析まで、それぞれの専門知識に詳しくなくても簡単にできます。

みなさん、どれだけフォントのことを意識できていますか？ ※2018年2月に開催された「Creative X #1 session 5C × 文字『デザイナに知ってほしい文字のこと』」よりレポート記事としてお届けします。 「Webデザインの95%はタイポグラフィである」 東京、ベルリン、チューリッヒに拠点を構えるデザインエージェンシー「Information Architectsm（iA）」は、2006年10月に公開した記事「Web Design is 95% Typograpy」でWebデザインにおけるタイポグラフィの重要性を説いた。 Webの世界でユーザーとテキストコミュニケーションを成立させる。そのために、どのフォントを選び、どう文字を配置するか。タイポグラフィ、ひいてはフォント、文字の知識はWebデザインに携わるものであれば、確実に身につけておくべき知識のひとつ。 そんな文字について

上から下までの、全体像をゲット。 たった今見ている「WEBページ全体の画像」が欲しい。そんな時があります。 こんな画像。 ブラウザ拡張機能をインストールしたり、何かしらのソフトウェアを使うという手もあるでしょう。でも「W […] The post FirefoxでWEBページ全体をフルスクリーンショット！見ているページの全画面キャプチャー画像をダウンロードする方法 first appeared on Requ.log | レクログ.

上から下までの、全体像をゲット。 たった今見ている「WEBページ全体の画像」が欲しい。そんな時があります。 こんな画像。 ブラウザ拡張機能をインストールしたり、何かしらのソフトウェアを使うという手もあるでしょう。でも「WEBページ全体のスクリーンショットが欲しい」だけなら、Google ChromeやFirefoxのデフォルト機能で、スピーディーに、簡単に手に入れることができます。 いつものブラウザ内で、 欲しいと思った瞬間に、 拡張機能なしで、 サクッと撮れる。 俯瞰した全体画像が欲しいシチュエーションで、すぐに使える方法を紹介します。 Firefox版キャプチャー方法

WEB上で見かける、ハイセンスなアイツ。 名前は通称「ファビコン」。 彼がいると、一気にサイトイメージや信頼感が高まります。ブラウザのタブに表示されるだけじゃありません。彼はブックマークに登録された時にも、その姿を現します。 もし彼がいないと、、、 ・・・ちょっと残念ですね。 でも、待っていても、彼はやってきてはくれません。誠実な日々を送っていても、神様がご褒美に連れて来てはくれません。Google先生がいつか連れてきてくれるわけでもありません。じゃあ、どうしたら”彼”はやってきてくれるのでしょうか？ ・・・残念ながら、自分で連れてくるしかありません。でもどうやって？

インストールしたら、もう使える。 記事のなかに画像を挿入したものの、思っていたより小さい・・・ これじゃあ、画像内の細かい内容が見えにくい・・・ そんなとき、クリックひとつで拡大表示させることができれば、閲覧者にとても伝 […] The post ポチッ、でビョイーン。クリックで画像を拡大表示させるワードプレスプラグイン「Easy FancyBox」の設定と応用例 first appeared on Requ.log | レクログ.

ComparisonConcept visualizationCorrelationDistributionGeolocationPart to wholeTrend over time

ロゴやメッセージ、キャッチコピーなどで、単に文字を並べるだけは味気ないものです。リガチャ（合字）やスワッシュを使って、文字のデザインを楽しみましょう！ 質問メールがたまにくるので、フォントのリガチャやスワッシュの正しい使い方を紹介します。 フォント: TheSecret 最近のお気に入りフォント「TheSecret」を使って、リガチャとスワッシュの使い方を見てみましょう。 ※TheSecretの作者様に画像掲載の許諾を得ています。 リガチャ（合字）とは、スワッシュとは リガチャ（合字）とスワッシュの使い方 リガチャ（合字）とは、スワッシュとは リガチャ（合字）とは複数の文字を合成して一文字にすること、スワッシュとはスクリプト系フォントのにょろっとした字形。 TheSecretはスクリプト系フォントの中でも、特にリガチャとスワッシュが充実しており、文字のデザインを楽しめます。

今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。

こんなに簡単だったんですか。 サイト運営をしていると、Facebookページとの連携が必要になることがあります。例えば、記事下にウツクシイ「いいね！」ボタンを設置したり。 サイドバーに「ページプラグイン」を設置したり。 […] The post 今すぐできる、開発者登録とFacebookアプリの作り方。App ID、App secretを取得してアクセストークンを調べよう first appeared on Requ.log | レクログ.

ほとんどのモダンブラウザがCSS3対応となったことで、これまではPhotoshopなどのデザインアプリで再現していたようなデザインスタイルも、HMTL/CSSで表現できるようになってきており、その進化はますます加速しています。 今回は HTML と CSS、わずかな JavaScript で実装できる、表現力の高いテキストエフェクト用コードスニペットをまとめてご紹介します。コードニペットは各エフェクト別にカテゴリ分けしているので、ウェブサイト制作に活用したいエフェクトを見つけてみましょう。 ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ CSS3の広がる可能性！美しいテキストエフェクト用コードスニペット24個まとめ CSSスタイリングで表現できる！すごいテキストエフェクト33個まとめ コンテンツ目次 1. アニメーション・テキストエフェクト 2. グリッチ・

スマホの普及、マイクロインタラクションの導入と合わせて、再評価されているGIFアニメを使ったUIデザイン。Webサイトを楽しくする活用法を5つ紹介。 ユーザーエクスペリエンスとは、「使いやすさ」だけではなく、製品やWebサイトをより心地よく、そして楽しく使えるようにすることです。Webサイトをおもしろくする方法には、注意を引くトランジション、インタラクティブ性、ビジュアル要素を取り入れる手法がありますが、GIFとCSSを組み合わせることで実現できます。 この記事では、邪魔になったり、大げさになったりすることなく、ユーザーエクスペリエンスの向上を目的としたモダンでスタイリッシュなGIFおよびCSSの使用法について例を挙げます。GIFはもはや、ネコの画像を見るためや、サボっている同僚をからかったりするためだけのものではありません。 デザインや開発しているWebサイトの訪問者を、GIFやCSSを

今の作業フローをもう少し良くしたい、と考えているデザイナーの方は多いのではないでしょうか。 日々のデザイン作業を"より快適に" "効率良く"するためには、デザインリソースを確認しておくことが重要です。 しかし、たくさんのツールやサービスがあり、実際問題どれを選んだらいいかわからなかったり……そもそも調べるのが面倒という方も決して少なくないはずです。 そこで今回は、数ある中からオススメしたいデザインリソースをピックアップしてご紹介します。 気になるものがあれば、今すぐ活用してみてはいかがでしょうか。 ※素材数などは2016年12月21日時点での情報です。今後変更となる可能性がありますのでご了承ください。 画像・動画素材関連 1. freepik http://www.freepik.com/ ベクター、PSD、アイコンと、様々な形式でデータが用意されている、便利な素材がたっぷり揃った素材サイ

はいソコー、チョーク投げるぞー、現実を見ろー そう現実は・・・ヤヤコシいことがいっぱいです。 あなたがブログを始める理由はなんでしょう。何にせよ、これらをぜーんぶ勉強しながらスタートするために必要な時間と気力は、相当なものです。 一方、「本格的なサイト」が最初から用意されていれば、最初から本格的に挑戦できます。 じゃあ具体的には【なぜWordPress初心者がMAGを選ぶべきなのか？】本当に良いものなので本気で紹介していきます。本気でベストなテーマを探している人だけ読み進めてください。 MAGのバリエーション例 設定画面は全て日本語の詳しい説明付き。迷うことがありません。書いてあるとおりに設定していけば簡単に満足のいくサイトレイアウトが完成します。 バリエーション例1 バリエーション例2 バリエーション例3 今回のためにバリエーション例をつくるのも、あっという間でした。どんなサイトコンセプ

サイトレイアウトは、直感的に、簡単に。 WEBサイトを立上げると、最初におおまかなレイアウト設定をすることになります。サイトのテーマカラー、ロゴの設置、SNSシェアボタンの設置などなど・・・ 色々と方法を探ってみるのもまあ、勉強になっていいものです。でも、納得のいくサイトが完成するのはいつになるやら・・・。 TCDテーマなら専門的な知識は不要。私たちのような素人でも簡単に、イメージどおりに設定できてしまいます。プロに外注するような本格的なサイトを自分で作れて、管理していける。そんな時代が来た、ということですね。 ここでは、TCDテーマならではの機能が集約した【テーマオプション】を紹介。サイトレイアウトを直感的に、簡単に設定できる様子をお伝えします。 サイト設定はほぼここで完結。「TCDテーマオプション」 TCDテーマをインストール・有効化すると、「外観」の中に「TCDテーマオプション」が現

ブログ 2018.04.4 FirefoxでWEBページ全体をフルスクリーンショット！見ているページの全画面キャプチャー画像をダウンロードする方法 上から下までの、全体像をゲット。たった今見ている「WEBページ全体の画像」が欲しい。そんな時があります。 こんな画像。ブラウザ拡張機能をインストールしたり、何かしらのソフトウェアを使うという手もあるでしょう。でも「WEBページ全体のスクリーンショットが欲しい」だけなら、FirefoxやGoogle Chromeのデフォルト機能で、スピーディーに、簡単に手に入れる… ブログ 2018.04.4 ChromeでWEBページ全体をフルスクリーンショット！見ているページの全画面キャプチャー画像をダウ… 上から下までの、全体像をゲット。たった今見ている「WEBページ全体の画像」が欲しい。そんな時があります。 こんな画像。ブラウザ拡張機能をインスト…

便利すぎて、正直びっくりした。 Local by Flywheel のウェブサイト WordCamp US へ参加した際にブースを出していたのを見かけていたのが “Local by Flywheel” というローカル環境を構築するためのツール（https://local.getflywheel.com/）。 MAMP (Pro) の UI が綺麗で速くて各サイトが分離されていて、機能がとても多い版というと分かりやすいでしょうか。また、WordPress の環境に特化しており、ワンクリックインストールやマルチサイト、SSL、Apache/Nginx の選択や切り替え、メールのデバッグツールや開発中のサイトの一時的な公開など、WordPressを使ってウェブサイトを作りましょう、となった場合に必要になりそうな機能を備えています。 で、無料です。 トップページに書かれているその機能は以下のように

新しい年を迎え、ロゴデザインを新しく作成したり、変更するのにもぴったりな時期。しかし、実際どんなデザインがいいのか迷ってしまうのも事実です。今回は、2017年のロゴデザインのトレンド予想を詳しくみていきましょう。 デザインの傾向は年々変化していますが、ロゴデザインの基本的な考え方はいつの時代も変わっていないので、ユーザーに強い印象を残すだけでなく、ブランドのメッセージやコンセプトをうまく伝えることができるでしょう。 コンテンツ目次 1. ミニマルスタイル 2. 手書きデザイン 3. ネガティブ・スペース 4. ラインアート 5. ビンテージ・デザイン 6. 簡素化デザイン 7. 動きのある部品 2017年を大予想！注目すべきロゴデザインのトレンド7個まとめ Designhill が世界中のトップロゴデザイナーと一緒に実施したリサーチでは、2017年に予想される新しいデザイントレンドがいくつ

ブログやサイトのロゴを作るときって時間的・金銭的に結構なコストがかかりますよね。 見栄えが良いロゴを作るにはある程度のデザインスキルを必要としますし、プロに依頼して作ってもらうとなると数万円単位で費用もかかってしまいます。 そこで、一つの解決策として「Logaster」というロゴジェネレーターを使う方法が結構おすすめです。 参考までにこんなロゴが一瞬でつくれます。 日本語もいい感じに出来上がります。 「Logaster」とは？ ロゴにしたい文字、たとえばブログの名前や会社名・サービス名を入力するだけで、ロゴを自動で作成してくれるジェネレーターサービスです。 ⇒ Logaster | 777logos.com 海外のロゴ作成サービスですが、日本語にも対応しているので使い勝手は悪くないです。 出来上がったロゴのサンプルをベースに、エンブレムや色を変えたり、フォントを変えたりすることもできます。