2018年3月15日 Webデザイン, XD デザインやプロトタイプを作成できるAdobe XD。みなさん使っていますか？先日アップデートもされ、Photoshopとの連携がより簡単になったり、Sketchファイルも扱えるようになるなど、進化が進んでいますね。これまではWebサイトのデザインにはPhotoshopが多く使われてきましたが、これからはXDが主力となっていきそうな予感。ということでAdobe XDを使ったWebデザインの手順を紹介します！ ↑私が10年以上利用している会計ソフト！ 今回作成するもの このように簡単なホームページと問い合わせフォーム用のモーダルウィンドウの画面を作ります。プロトタイプ機能で画面推移のアニメーションも加えてみましょう！ 1. 画面の作成準備 Adobe XDを立ち上げ、Web用の画面を1280×800のサイズで新規作成します。「portfolio」と

2017年10月11日 CSS, Webデザイン Webデザイン・制作を教えている時に、担当していた生徒さんからこんな悲痛なメッセージをいただきました。「Webサイトのデザインを出してみたものの、本気を出して作ってくださいと言われてしまいました…」。デザインを見てみると、とても美しく整ったものだったのですが、「テンプレートとしてありがち」なレイアウトに見えました。この辺を指摘されたのかな、と。自分でコーディングをすることを考えると、どうしても自分の力で実現できそうなデザインにしてしまうんですね。私も駆け出しの頃はよくありました。そこで今回はちょっとした工夫で少し差がつくCSSの小技をいくつか紹介します。簡単にできるとわかれば、デザインに反映できそうですね！ ↑私が10年以上利用している会計ソフト！ 1. 要素を斜めに配置 通常CSSでレイアウトを組んでいくと、垂直平行のボックスが並んでいく

2017年8月24日 CSS 日本の書籍は元々上から下、右から左という縦書きで書かれてきました。しかしWebサイトでは横書きが基本なので、縦書きを取り入れることで日本らしさやWebサイトの個性を引き立てられます。かつてのWebサイト制作では縦書きが難しく、多くの場合画像を使って表示されてきましたが、CSSでも縦書きが実装できるようになりました！今回はそんな縦書き表現に注目したいと思います！ ↑私が10年以上利用している会計ソフト！ 縦書きにするには 縦書きを設定するのはとっても簡単！縦書きにしたい箇所にCSSで writing-mode: vertical-rl; を記述します。この「vertical」が縦、「rl」が右から左（Right to Left）という意味です。 また、IE用には別の書き方になります。 -ms- というベンダープレフィックスを付け、tb-rl（上から下、右から左＝

2017年5月16日 Webサイト制作, 便利ツール Webサイトとユーザーの架け橋となる問い合わせフォーム。ユーザーからすると単に問い合わせ先の電話番号やメールアドレスを掲載されているよりも気軽に問い合わせできますよね。今回はそんな問い合わせフォームをサクッと設置できるサービスを紹介します。HTMLとCSSで簡単なWebサイトは作れるようになったものの、問い合わせフォーム等の機能は作れない！なんていう方の強い味方！ ↑私が10年以上利用している会計ソフト！ 定番中の定番！【Googleフォーム】 Googleが提供しているGoogleフォームは誰でも無料で直感的にフォームを作れるサービス。アンケート調査に使われることが多い印象ですが、お問い合わせフォームとしても使えますよ。さっそく作ってみましょう！ まずは「Googleフォームを使う」ボタンをクリックしてフォームの作成画面に移動し、右下

2017年5月1日 便利ツール SmallchatはWebサイトにチャット機能を加えられるWebサービス。類似サービスは他にもありますが、Slackと連携できる点にメリットを感じる方も多くいらっしゃると思います。Webサイトにチャット機能をつけることで、Web接客やリアルタイム接客と呼ばれる、Webサイトでも現実世界の店舗や企業のように質問をすればすぐに受け答えしてもらえるような接客が可能となるでしょう。ECサイトなどで特に重宝できそう！さっそくどんなサービスなのか見てみましょう！ ↑私が10年以上利用している会計ソフト！ アカウント登録 まずはSlackのアカウントをお持ちでない方は作成します。すでにお持ちの方はログイン。続いてSlackの新規チームを作成しておきましょう。 SmallchatのWebサイトから「Add to Slack」ボタンをクリックしてSmallchatアカウントを

2021年12月28日 CSS 大きさの異なる複数のボックスを隙間なく並べてタイル状に表示したい！そんな時もありますよね。モザイクレイアウト、Masonryレイアウト、Windows 8 Metroスタイルレイアウト…などなど、さまざまな呼び方のあるこのレイアウト。今回は display: grid という新しい配置方法を使ってレイアウトを組んでみますよ！もちろんレスポンシブにも対応させたいと思います！ ↑私が10年以上利用している会計ソフト！ CSSグリッドの基本の書き方は動画で確認！ 基本的な記述方法は動画でも紹介しています。初めてCSSグリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 1. どんなレイアウトにするか書き出す グリッドレイアウトは少し複雑で、何も考えず組んでいくとどこの要素がどうなっているのか…こんがらがってきちゃいます。ご利用は計画的に！慣れるま

2016年9月21日 CSS, Wordpress ブログ等の個別記事でよく見かける、「前の記事」「次の記事」へのリンク。これまでも実装方法やスタイリング方法は紹介されてきましたが、Flexboxを使ったらもっと楽に作れちゃうよ！ということで、その方法と、ついでにWordPressでの実装方法も紹介します。 ↑私が10年以上利用している会計ソフト！ 1. モバイル用リンクを作成 まずは小さい画面用のリンクを作成します。「モバイルファースト」と呼ばれる手法ですね。前の記事のリンクを上に、次の記事のリンクを下に並べて表示します。ここでは特に込み入った事はしないので、簡単に実装できるはずです。 HTML <div class="prev-next-link"> <a class="prev-link" href="#"> <p class="prev-next-label">前の記事</p> <

2016年9月1日 ユーザビリティ 8月某日、ワイヤーフレーム作成ツールのCacooなど、制作業務を円滑に進めるための様々な便利ツールを開発しているヌーラボさんにおじゃましました。そこで、まもなくプロジェクト管理ツールのBacklogをリデザインするということでしたので、ユーザビリティテストの被験者をしてみることに！ユーザビリティテストを行うことはありましたが、本格的なテストの被験者をすることはあまりなかったので、ワクワクしながら受けてみましたよ。 ↑私が10年以上利用している会計ソフト！ リデザインの経緯 長く愛用され続けてきたUIを改新するということですので、デザインを変更することを決めた理由や経緯について、中の人に聞いてみました！ 今までのUIは、少し前のWebアプリケーションで良く見られたような、1画面に多くの情報を載せてすべての機能を文字ラベルで表示するタイプでした。この方針には

2016年7月13日 JavaScript, 便利ツール 制作関連のブログのように作業の手順を紹介する時、Webサイトやアプリの動きを見せたい時、Webサービスの不具合を報告したい時…。画面に表示されているものや動きを言葉で説明するよりも、動画で説明した方が早い場合も多々ありますよね。短時間の動画ならGIFアニメーションにしてみてはいかがでしょうか？今回は画面キャプチャを録画し、自動でGIFアニメーションに変換してくれる便利なツールを紹介します。 ↑私が10年以上利用している会計ソフト！ 画面キャプチャからGIFに変換するツール GIPHY GIPHYは画面の動きを録画し、GIFに変換するためのMac用アプリ。無料で使えます。GIPHYのいいところは、なんと言っても動きが滑らか！そして繰り返し表示の設定や、動画の開始・終了ポイントの編集、キャプション（英数字のみ）まで加えられます。ただ、滑

2016年6月1日 UXデザイン 最近、求人サイトなどを見てみると、「Webデザイナー」という職種での募集よりも「UXデザイナー」での募集をよく見かける気がします。しかし、UXデザイナーって実際どんな仕事をしているんでしょうか？Webデザイナーとは何が違うんでしょう？今回はUXデザイナーの仕事内容と、どんなスキルがあればUXデザイナーとして活躍できるのかを調査しました！ ↑私が10年以上利用している会計ソフト！ UXデザインって何？ UXとは「User Experience（ユーザー・エクスペリエンス）」の略で、日本語では「ユーザー体験」などと訳されています。見た目だけではなく、画面や機能の使いやすさや、使っていくなかで「楽しい！」「心地いい！」とユーザーに満足してもらえるかを考えた概念です。 UXデザイナーの仕事内容 「UXデザイン」について、なんとなくわかっていても、なんだかふわっとし

2016年5月10日 Webデザイン, ユーザビリティ, 色彩 人間は一瞬で物を識別します。研究によると、たった0.1秒で人を判別できるようです。Webサイトにおいても同じことが言え、ユーザーはWebサイトを開いて0.05秒でそのサイトが好きかどうかを判断し、そのサイトを見続けるか、閉じるかを決めるそうです。そんな大切な「第一印象」。どのようにチェックすればいいのか、考えていきましょう！ ↑私が10年以上利用している会計ソフト！ ぼかしテスト ぼかしテストでは、デザインをぼかした状態で確認し、強調するべき箇所が強調されているかをチェックします。 テスト方法 Photoshopを使う方法と、ブラウザーを使う方法があります。 Photoshopを使う方法 バナー広告やWebサイトのスクリーンショット画像を用意 Photoshopで フィルター＞ぼかし＞ぼかし（ガウス）で5〜10pxほど画像をぼ

2019年5月16日 CSS Webでのデザインはどうしても四角形のボックス型になりがち。印刷物だとテキストの配置ももっと自由にできますよね。今回はテキストを画像などの形にあわせて回りこませたり流しこんだりできちゃう CSS Shapes について紹介します！ ↑私が10年以上利用している会計ソフト！ CSS Shapesとは CSS Shapesを使えば、円形や多角形、画像に合わせて、そのまわりに float で横並びにしているテキストを回り込ませて配置できます。雑誌や印刷物の広告などでみかけるレイアウトのひとつですね！これがWebでも表現できるようになれば、デザインの幅がグンと広がるのではないでしょうか？ 通常、テキストと円形の要素を横に並べると、この図のように四角形をベースとした配置になり、円の右上・左上・左下・右下には空白ができます。そのスペースを shape-outside プロ

2016年3月22日 Webデザイン, 色彩 パッと見ただけで印象に残りやすいビビッドカラー。扱い方を間違えると、ただうるさく、ゴチャゴチャして見えるだけになってしまいます。今回はそんなビビッドカラーをうまく使っているWebサイトをいくつかまとめてみました。ビビッドカラーとのうまい付き合い方も合わせて読んでみてください！ ↑私が10年以上利用している会計ソフト！ ビビッドカラーってどんな色？ ビビッド（vivid）は日本語で「色鮮やかな」という意味。明度・彩度ともに高く、正式には「純色」と呼ばれる色相のことです。鮮やかで活発、強いイメージがある派手な色なので、アクセントカラーとしてデザインに取り入れることも多くあります。 具体的なカラーコードを紹介しているサイトもありました。こうして並べて見るとかなり目がチカチカしちゃいますが、使うポイントを抑えておけば、とってもかっこいいデザインに仕上げ

2015年10月27日 CSS Webブラウザーによって表示可能なCSSが異なるのは、よく知られていることです。例えばChromeやSafariでは問題なく表示される filter は、Internet Explorerではうまく表示されず、別のスタイルを用意しなければいけません。今回は @supports を使って対応しているプロパティー別にスタイルを変更してみましょう。 ↑私が10年以上利用している会計ソフト！ @supports とは？ 指定した (プロパティー:値) の条件に対応しているブラウザーには {} 内に書かれたスタイルを適用するよ、というもの。新しいスタイルの書き方に対応しているブラウザーにはそれを、対応していないブラウザーには従来の書き方で、かつ見栄えの崩れないようにコンテンツを提供できるよう、CSSを記述していけます。「プログレッシブエンハンスメント」というやつですね

2015年10月22日 Webデザイン 私がまだデザイナーとして働き始めて間もない頃、よく言われた言葉の中に「もっと自由にデザインしてくれていいんだよ！」というものがありました。しばらくはその意味がわからなかったのですが、後になって渡されたワイヤーフレームと自分のデザインを見比べると、何も変わっていないな…と気づくことが多々ありました。今回はそんな、ワイヤーフレームとデザインについて考えてみようと思います。 ↑私が10年以上利用している会計ソフト！ 冒頭でも述べたように、Webデザイナーとしての経験があまりないうちは、どうしても渡されたワイヤーフレームに引っ張られてデザインしてしまうこともあるかと思います。もちろん、ワイヤーフレーム通りのレイアウトが求められることもあるでしょう。しかし、あなたはデザイナーです。指示された通りに動くマウスカーソルではありません。ワイヤーフレームを作るのは、多

2015年10月14日 Webデザイン, 便利ツール Photoshopでも写真を手描き風に加工する方法はありますが、手間がかかったり、イマイチ思い通りに作れなかったりしませんか？今回紹介するTopaz Impressionというツールを使えば、一発で素敵加工に仕上げられちゃいますよ！ ↑私が10年以上利用している会計ソフト！ Topaz Impressionとは？ Topaz Impressionはお好みの画像を手描きや油絵、水彩画風に手軽に加工できちゃうツール。 画像を選択して、好みのフィルターをクリックすればOK。プリセットのフィルターでも充分素敵ですが、さらにブラシを変更したり、色やキャンバスを変更して、細部まで調整できます！ いろいろ加工してみよう！ さっそく使ってみましょう！Topaz Impressionの画面右側から好みのエフェクトを選択できます。 Watercolor 水

2015年9月24日 便利ツール 巷ではgulpやGruntなどを使ったスタイルガイド生成ツールが多く存在します。しかし、CSSのコメントに書き込んだりするのはWeb制作者でないと難しい部分もありますし、そもそもファイルを作るのがめんどうだったり…と、なかなかスタイルガイドを作る気になれない人もいるんじゃないかと思います。今回は非Web制作者でも簡単にスタイルガイドが作れちゃうFrontify Style Guideを紹介します！ ↑私が10年以上利用している会計ソフト！ スタイルガイドとは？ Webサイトを一人で制作、運営している場合、そのサイトに必要な画像やロゴ、配色パターンなどはすべて自分が把握できているものです。しかしチームを組んで運営していく場合は、コーディング規約と同様、デザインのルールをひとつにまとめておくといいでしょう。そのルール集がスタイルガイドです。スタイルガイドを作る

2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと

2020年5月18日 CSS, Webデザイン, 便利ツール 背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はグラデーションカラーをCSSで実装する基本的な方法から、画像に重ねる応用、配色選びに使えるサイト、実例集などを紹介します！ ↑私が10年以上利用している会計ソフト！ CSSでグラデーションを実装 グラデーションは background プロパティーに linear-gradient の値を使って色を指定します。意外と簡単。 body { background: linear-gradient(#05FBFF, #1E00FF); } See the Pen CSS linear-gradient by Mana (@manabox) on CodePen

2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が