デザイン
design
2020/05/13
「Google Sites」はワイヤーフレーム制作ツールとして使える？実際に触ってみた感想
こんにちは、中の人です。 今回は、非デザイナーでもワイヤー制作に使える便利なツールは無いかと探していたところ、偶然見つけてしまった「Google Sites」というオンラインツールをご紹介したいと思います。 もくじIndex 「Google Sites」って？ 「Google Sites」の使い方 実際に作ったワイヤー 「Google Sites」のここが不便 「Google Sites」のここが便利 結論 「Google Sites」って？ 「Google Sites」はGoogleが提供しているWebサイト作成ツールです。 基本的にはコードを書かずに、コンポーネントをドラッグで配置するなどの直感的な操作だけでサイトの構築ができてしまいます。 作成したサイトはGoogleの他のツール(Google ドキュメントやGoogle スプレッドシート)と同様にGoogle Drive上で管理ができます。 直感的な操作でサイト構築できることから、使用用途は社内Wikiの構築からデザイナーへのイメージ共有など多岐に渡るとのことです。 「Google Sites」の使い方 Googleのアカウントがあれば誰でも利用できます Google Driveにアクセスし、ドキュメントやスプレッドシートを作成する要領で「Google Sites」にアクセスできます。 基本的にはマウス操作などの直感的な操作だけで作業できます 右側のサイドバーから任意のパーツをドラッグしてくるだけで簡単に配置できます。 WordpressのElementorのような操作感です。 詳しい使い方はferretさんの記事が分かりやすかったです。 実際に作ったワイヤー 実際に作ってみた簡易的なワイヤーフレームがこちらです。 「Google Sites」のここが不便 アクセシビリティを担保するためには仕方が無いと思うのですが、少しだけ不便な点もいくつかあります。 その1 文字色や文字サイズなどを細かく指定できない 基本的にフォントサイズは4種類(題名/見出し/小見出し/標準テキスト/小)、フォントカラーは指定不可能です。ワイヤーフレームを作るくらいではそこまで気になりませんが、実際に「Google Sites」でサイトを構築するとなると細かくフォントスタイル等を指定できないのはネックになりそうです。 その2 エディタ上で作成したものを画像やPDFで書き出せない もともとワイヤー制作専用のツールではないので当たり前ですが、画像やPDF形式での書き出しはできません。 なので、ディレクター→デザイナーの共有の際は共有用のリンクを介してワイヤーを共有する流れになります。 その3 メモ書きや注釈を残せない こちらも、ワイヤー制作のためのツールでは無いということを考慮すると仕方が無いですね。 「Google Sites」で作ったワイヤーにメモ書きや注釈を残したいのであれば、一度キャプチャしたものをパワポやらGoogleスライドやらに貼る必要がありそうです。 (やはりワイヤー制作はパワポが無難か...) 「Google Sites」のここが便利 上記とは逆に、便利だなぁと感じた部分もあります。 その1 遷移先が伝わりやすい 「Google Sites」はサイト構築ツールなので、もちろんリンクの埋め込みが可能です。 そこで、ワイヤー制作として使用する際は実際にページ遷移することで"どこのボタンがどこのリンクか"問題を事前に防ぐことができそうです。 その2 直感的な操作感 冒頭でも言ってたように、技術者問わずどなたでもサイトの構築ができてしまうツールとだけあって、アクセシビリティ抜群です。 しかし、その反面で自由度の低さもあります。 結論 やはりワイヤー制作にはパワポがいいね。
2020/05/07
個人的によく使うアイコン素材サイト(商用可/無料)
こんにちは、中の人です。 簡易的なプロトタイプ作りからバリバリのWEBデザインにまで幅広く使っていけそうなアイコン素材の配布サイトをまとめてみました。 クセが少なく、なるべくシンプルなアイコンを取り扱うサイトを厳選していきます。 もくじIndex ICOOON MONO Icon-rainbow iconmonstr Material Design SVG PORN ICOOON MONO だいぶ長いことお世話になっているサイト。大体のアイコンはここで揃う。 もちろんベクターデータのアイコンも配布している。 ICOOON MONO Icon-rainbow 先ほど紹介した「ICOOON MONO」激似なサイト。 取り扱うアイコンも同様にシンプルでクセが少なく使いやすい。 Icon-rainbow iconmonstr アイコン本体の色やサイズだけでなく、アイコンの背景の色や形状などもサイト上でカスタマイズできるイケてるサイト。 iconmonstr Material Design Googleによるマテリアルデザインのガイドラインページ。 よく目にするアイコンが並んでいる。 個人的にかなりオススメ。 Material Design SVG PORN デベロッパー向けのサービスやツールのロゴがSVGでダウンロードできる。 極稀に使える。 SVG PORN
2020/04/23
厳選！現役WebデザイナーがオススメしたいWebメディア
こんにちは、中の人です。 今回は、空き時間やちょっとした息抜きの際にサクッと見れる"初学者のWebデザイナー/WebコーダーさんにオススメのWebマガジン・Webメディア"を厳選してみたので是非見てみてください。 こちらの情報は随時、更新していけたらと思います。 もくじIndex PhotoshopVIP JDN 美術手帖 UX MILK Webクリエイターボックス ferret コリス Awwwards. Design notes PhotoshopVIP 最新のデザインニュースからフリーフォント、無料素材まで豊富に取り扱うデザイナーに優しいサイト。 筆者も何か無料素材が欲しい時はだいたいこちらのサイトを見ます。 PhotoshopVIP JDN 主に国内外のニュースやインタビューを取り扱うサイト。 学生時代に死ぬほど読み漁った「登竜門」や「卒展」もJDNさんが運営している。 JDN 美術手帖 イベントや個展、ギャラリーの情報が豊富。 著名人のインタビュー記事も取り扱っている。 美術手帖 UX MILK UI/UX関連の記事が豊富。 それでいて記事一つ一つの質が高く、最近毎日見てるサイト。 海外記事を日本語訳した記事もあるため、海外の情報も取り入れられる。 UX MILK Webクリエイターボックス WEBコーディングの知識を得られるサイト。 筆者はだいたい夜寝る前にこちらのサイトを開く。 Webクリエイターボックス ferret SEO周りやUI/UX関連など、マーケター寄りの記事が多い。 デザイナーもある程度マーケティングの知識が必要なため暇があったら筆者も見ている。 ferret コリス かなり昔からあるイメージ。 実装周りの記事が多く、Webデザイナーにとって学校の先生的な位置付けのサイト コリス Awwwards. 海外のWebアーカイブサイト。 掲載されているサイトがとにかくカッコいい。 実務で参考サイトを探す際、時々使う。 Awwwards. Design notes デザイナー向けのリソースライブラリ。 デザインのコンポーネント集やデザインツール、ニュースサイトなど幅広く扱う。 めちゃくちゃ良いサイトだが、英語なのが玉に瑕。 Design notes
