Webサイトやアプリの制作をするときには必須となるプロトタイプやワイヤーフレーム。 WEB制作を依頼するときにワイヤープレームありますかと聞かれることがあると思います。 Web制作依頼する前に、サイトの内容やイメージするデザインサイトやこういう風サイトにしたい、そしてワイヤーフレームを作っておくと話が早いと思います。 もちろんパワポでも、Keynoteでも作ることができます。 今回はプロトタイプやワイヤーフレームを作成するときに便利なプロトタイプやワイヤーフレーム作成ツールをご紹介します。 まずは「プロトタイプ」や「ワイヤーフレーム」について。 プロトタイプやワイヤーフレームとは プロトタイプとは ページを構成する要素や機能だけでなく、ページ間の遷移やクリックしたときの動きや操作感などの確認ができるものをプロトタイプ（試作品）と言います。 本格的な制作に入る前にプロトタイプを作成することで

昨年2014年は、とある事業主のEC事業の立ち上げに携わりました@unificatです。 法人設立・EC Cube構築・配送業者・決済代行業者・etc...初めてやる事を手探りで色々やりました。まぁ「全部やりました」と言っても過言ではないかと思うくらい色々やりました。 他にも商品の仕入れとかもありますが、本記事ではオンライン上で物販をおこなうEコマースの立ち上げについて触れてみたいと思います。 ちなみに技術に関するネタは全然ないので、技術的な内容を期待した人はごめんなさい。 1.サーバの選定・準備 サーバはレンタルサーバの中で探しました。リリースしてもまだ小規模なので、トラフィックが増えたり、複雑な事をし始めたらVPSや専用サーバを検討すればいいかなと思いました。 なによりWebデザイナーという立場でサーバ周りまで手を出すと、正直リリースまで時間が掛かりそうだと感じたからです。 選定の結果

2016年にリリースされた、ウェブデザインの制作時間を節約できる無料ウェブツールやアプリをまとめてご紹介します。インストールなどする必要もなく、ブックマークしておけばいざという時にも便利です。 今回は、デザインツールを以下のカテゴリーごとに分けています。お気に入りのツールを見つけてみてはいかがでしょう。 コンテンツ目次 1. Web タイポグラフィー関連ツール 2. 配色カラー関連ツール 3. Web ベース CSS 関連ツール 4. レスポンシブ・ウェブデザイン関連ツール 5. ウェブパフォーマンス関連ツール 6. オンラインチェックリスト、ガイド、参考リファレンス 7. 画像イメージ関連ツール & 編集エディター 8. ウェブデザイナー向けお役立ちディレクトリ 8. その他ツール Web タイポグラフィー関連ツール Type Anything ウェブサイトで利用したいフォントを試すこと

フリーランスのWebデザイナーの場合、最初から最後までひとりで制作することのほうが多い。実際に、Webデザイナーってどんな仕事をするのかという質問をよくいただくので、「こんなことをしています…」みたいなことを紹介したりする。 今回は、フリーランスとしても時々Webデザインの仕事をするぼくが、ふだんデザインするときに気をつけていることや、いつもルーティンとして行っているWebサイトの制作フローについてまとめてみた。これはあくまでぼくがWebサイトを作るときに制作しているフローなので、ほかのデザイナーや制作会社とは違う部分もあるかもしれない。もっと効率化できることもあるはずだなーと思いながら、最初から最後まで書いていこうと思う。 1. 制作準備 1-1. ターゲットとゴールを設定する 最初に、依頼主であるクライアント(お客様)とお話をしながら、Webサイトのターゲットやゴールを設定していく。W

<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を返す

新人コーダーが迷いやすいと言われている、ファイル名、id・class名の付け方。 この記事では、それぞれの命名規則やコツについてまとめたいと思います。 少しでも皆様の参考となれば幸いです。 共通事項 ファイル名、id・class名を付ける際の注意点 まず始めに、ファイル名、id・class名を付ける際の注意点から確認していきます。 難しいことはありません。 下記に注意して名前を付けるようにましょう。 １．半角英数字のみを使用する。 「日本語」、「全角英数字・記号」、「半角カタカナ」は使用することが出来ません。 ２．記号は「-」（ハイフン）、「_」（アンダースコア）のみ使用する。 「\」（エンマーク）、「/」（スラッシュ）、「:」（コロン）、「*」（アスタリスク）、「?」（クエスチョン）、「”」（ダブルクォーテーション）、「<」（左アングルかっこ）、「>」（右アングルかっこ）、「|」（パイプ

スマホはメニューバーが命！！ スマホでもっとも重要な動作は「タップ」ですが、その重要な役割を引き受けるのがメニューアイコンやリストです。 ユーザが求めるコンテンツにスムーズにつなげられるよう、最適化していくことが必要です。 ただそのデザイン、「なんとなく」のものになっていませんか？ 違和感なくスムーズにコンテンツにつなげるためには、最適なデザインを選択する必要があります。 今回は100のスマホサイトを調査し、その中で代表的な36サイトから7つのメニューデザインに分類し、まとめてみました。 自分のスマホサイトの性質を考えながら、もっとも適切なメニューを探していきましょう！ 100のスマホサイトから見る、 スマホメニューの人気ランキング 上図は、100のスマホサイトをランダムに抽出し、それぞれのサイトで採用されているメニューの割合を調査した結果になります。この結果によれば、一位が圧倒的な割合で

スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景

PageSpeed Insights とは Google が提供している Web ページの表示スピードを測定して点数をつけてくれるツールです。点数が高いほど Google 検索において有利だと言われているので、高いに越したことはありません。今回はその点数を満点である100点にする方法を紹介します。 「WordPress は遅い」「PHP は遅い」という話を聞いたりもしますし、WordPress だから高得点は無理だと思い込んでいる人もいるのでそんなことは無いよ、というお話です。これを真似すれば基本的には誰でも、WordPress であっても PageSpeed Insights で100点を取れるはずです。 Google アナリティクスを外すPageSpeed Insights では、JavaScript ファイルのブラウザキャッシュ時間を長め（10日程度）に設定しないと点数が下がります。

CSSがサイトの読込速度の遅延原因かも？見直すところは大きく3つ！ 2015.01.23 2020.12.17 技術 CSSもページ表示速度を落とす要因になります 「なんだか自分のサイトのページの表示速度が遅いなあ…」そうしたお悩みをお持ちの方は多いのではないでしょうか。 もしかしたら、CSSが原因の1つになっているのかも？CSSを見直す良い機会かもしれません。 ブラウザはページ内容を表示する時レンダリングを行っています。 レンダリングとは、データ（今回の場合だとHTML）に書かれている情報を解析し、その通りにディスプレイに表示させることを指します。 外部CSSはこのレンダリングをブロックしてしまうリソースの1つで、運用方法によっては、これが原因でページ内容を表示するのが遅くなることがあり得ます。 どこを、どうやって改善するといい？ CSSをインライン化する セレクタを見直す HTTPリク

可能な限り最新の情報を反映していますが、追いつけていないこともあります。本サイトに採用していても、記事に反映できていない設定もあります。ページのソースを読んでいただくと、参考になる箇所があるかもしれません。 ウェブページの高速化に関するテクニックは、ネットで検索すれば簡単に見つけることができます。優れた情報も数多くありますが、｢CSSとJavaScriptはminify（ミニファイ）しておけばOK！」のような都市伝説も少なくありません。 そこで、ここでは本サイトのデザインリニューアル時に施した対策をもとに、一歩進んだウェブページの高速化の方法と、それを支える原理について、できる限り分かりやすく説明したいと思います。フロントエンジニアやデザイナーの方からすれば「んなもん知っとるわ！」な情報なのかもしれませんが、都市伝説を駆逐すべく、私なりの仕方で解説（≒加勢）したいと思います。 初めに結果を

2017年9月22日 Webサイト制作, 便利ツール Webサイトの制作時に、特に初心者さんが設置を忘れがちなファビコン。Webサイトをブックマークした際や、タブ表示した際にサイト名の横にちょこんと表示されている小さなアイコンのことです（Favourite + Icon = Favicon）。デバイスが増え、これまでとは設置方法が少し変わってきているのと、機能のついたファビコンも増えてきているので、その辺もあわせて紹介します！ ↑私が10年以上利用している会計ソフト！ ファビコンをデザインする ファビコンは16×16ピクセルとかなり小さいながらも、その存在は偉大です。複数のタブを開いている時や、ブックマークリストの中から、ひと目見てどのサイトか区別できるからです。 多くの場合、そのWebサイトのロゴマークを縮めたり、簡略化したものがファビコンデザインとして採用されています。CHANEL、A

Googleの提供するPageSpeed Insightsを参考にして、Webサイトを高速化したときにやったこと こんにちは、ライターのモリイです。 Googleが提供しているPageSpeed Insightsというサービスがあります。これは、ウェブページのコンテンツを解析してページの読み込み速度を測定し、速度の改善策を提案してくれるサービスです。 たかがページの読み込み時間、と侮ることはできません。 読み込み時間が短くなることで、 Googleに評価される。 ユーザーにストレスをあたえない。 というメリットがあり、Google検索での順位をあげるためや、ユーザに離脱されないためにも重要な要素となります。今回は、このツールを使ってサイトの読み込みスピードを実際に上げてみようと思います。 ページの読み込みスピードを分析してみる 画面中央のフォームにサイトのURLを入力し、「分析」をクリック

みなさんはAdobe Photoshopでどのように画像を書き出してますか？ 最新のPhotoshopではさまざまな画像書き出し機能が搭載されていますが、どれを選択するかで手間が異なります。 本記事ではPhotoshopのさまざまな画像書き出し機能を紹介し、最適な画像書き出し方法を検証します。 この記事はPhotoshop CC 2022 (23.5.0)で検証しています。 この記事のポイント 新しい画像保存方式（書き出し形式、クイック書き出し）は手間が少ないので、作業効率が良い 新しい画像保存方式はデフォルト設定で、小さなファイルサイズの結果を得られやすい アニメーションGIF保存は「Web用に書き出し（従来）」を使う Photoshopの画像書き出し方法一覧 Photoshop CCにおいて、画像を書き出す方法は分けて5種類あります。 書き出し形式 ［ファイル］→［書き出し］→［書き出

閲覧ページにグリッドを表示させたりレスポンシブ確認を容易にするものをはじめ、使用されているフォント確認、ページをワイヤーフレーム化するもの、ページの表示速度やHTMLチェックを行ってくれるものなど、サイト制作時や気になるサイトのことをちょっと調べたい時などに便利なブックマークレットを紹介します。 中には拡張機能やデベロッパーツール使えば十分というものもありますが、拡張機能を入れすぎて重くなるのを防ぎたいという場合やデベロッパーツールをあまり使っていないという人には手軽で便利ですし、何より様々なブラウザで使用できるのが嬉しいと思います。 ここではブックマークレットとして紹介していますが、中にはChromeの拡張機能として利用できるものもあるので、その場合は自分が使いやすいと思う方を利用してみてください。 また、ブックマークレットによってはPCだけでなくスマートフォンなどでも十分利用できるもの