今回は日頃からお世話になっている素敵なWebサイトを集めたおすすめギャラリーサイトのご紹介です。

mito

ギャラリーサイトを知っているとWebサイト制作時にクライアントさんと「こんなイメージですか？」とすぐに具体的な提案ができるので良いですよ！

momo

自分のデザインなんかイマイチだな…もう一味..何が必要なんだろう？？と悩んだときのヒントにもなるよ！

mito

Webサイトのデザインも流行があるのでいち早く把握し、自分のデザインにも活かせますね！！

それではいってみましょう。

Webデザインの参考になるギャラリーサイト7選

週刊ウェブデザイン

毎週20サイト以上更新されており、新しい情報を入手できます。

週刊ウェブデザイン

イケサイ

イケサイ

その名の通りお洒落なサイトが集められています。

WEBデザインの見本帳

WEBデザインの見本帳

「WEBサイトを作成する際のデザインの配色・見本・参考」「お客様・クライアントにイメージを伝えるためのサンプル」「制作会社へのサイトイメージを伝えるためのご提案」を目的として作られたサイト。

mito

様々なジャンルが検索できる＆検索部分など手作り感があって個人的には好きです。

I/O 3000

I/O 3000

国内外問わず素敵なサイトが集められています。

mito

検索キーワードが多いので使いやすいです！

MUUUUU.ORG

MUUUUU.ORG

クオリティが高い縦に長いサイトが集められています。

momo

情報量が多いサイトを作るときに参考になるね！

Choicely

Choicely

マーケター目線で良いと思うサイトが集められています。

momo

SEOやサイトの導線、情報設計の参考になるね

おまけ

ブブンデザインアーカイブ

ロゴ、タイトル、文字装飾など部分的なデザインの参考になります。

mito

アイキャッチ作成やバナー作成でもお世話になっています

ブブンデザインアーカイブ

まとめ

いかがだったでしょうか。

デザインは「見て学ぶ」→「使ってみる」というステップでスキルが身に付くことが多いのでまず良いデザインにたくさん触れることを心がけたいですね！

mito

サイトを作るときに画像を多用して、サイト表示が遅くなる。。ということありませんか？？

momo

表示速度が遅い原因、まず疑うべきは画像ファイルサイズが大きすぎるということだね。

mito

表示速度が遅くなると、ユーザーが離脱率が高くなるので直したいところですね。

今回は、Webサービスを使って、

• ブラウザ上で、
• 簡単に、
• 無料で

画像を軽く圧縮する方法をご紹介します！

mito

元画像のファイルサイズによって無料の範囲で使えるサービスが異なるようなのでファイルサイズ別にご紹介します！

5M以下の画像ファイルを圧縮したい場合はtinypng

10M以下の画像ファイルを圧縮したい場合はcompressor.io

10M以上のPNG画像ファイルを圧縮したい場合はcompresspng

まとめ

3つのファイル圧縮サービス共通点

・ドラッグ＆ドロップでアップロードが簡単にできる

・会員登録やソフトのインストール不要

momo

とにかく簡単に画像が圧縮できるのが魅力だね！

3つのファイル圧縮サービスの相違点

・圧縮できるファイル拡張子が異なる

・圧縮できるファイルサイズが異なる

mito

この2点を注意して使い分けると良いと思います〜！

mito

最近、情報設計も意識したデザインができるようになりたい！と思うようになり、Cocoda!のサービスを見つけました。

今回は、実際にCocoda!のサービスを使った感想とサービス特徴をまとめたいと思います。

Cocoda!ってなに？

Cocoda!とは、UIが学べる無料の学習サービスです。

mito

お題に沿ってデザインを作り、実際に手を動かしながらUIデザインのスキルを身につけられます。

「UIデザイナーになりたい人」
はもちろん、
「自分のデザインスキルを高めたい」
「ポートフォリオを充実させたい」

と思っている方にもおすすめです。

＼Cocoda!を詳しくみる／

Cocoda!でなにが学べるの？

デザインの中でも特にUI設計のポイントが学べます。

お題に沿ってデザインを作り、作り終わるとフィードバックのコンテンツがみられます。

momo

作って終わりではなく、作った後に自分のデザインを見返し改善点を見つけるところまでできるんだね！

また、お題以外にもデザイン基礎を学べるコンテンツがあります。

Cocoda!のいいところ6つ

mito

私が実際に取り組んでいいな！と思ったところ6つをご紹介したいと思います。

①フィードバックコンテンツで自分で改善点が見つけらる

毎日取り組む前提なので、今回の反省点はすぐ次の日のデザインに活かせます。

②同じ課題に取り組む他人のデザインが見られる

他人の作品にヒントがあり、参考にすることで、作る時間を短縮できます。

③1日1つ60分という制限時間の中で考える癖ができる

mito

1日60分なら時間を作れそう！！そう思って毎日取り組めています。

「60分でできるようにするにはどうしようか？」という考え方にもなってきて、短時間で質の高いアウトプットをする練習にもなります。

④アウトプットしながら、同時にデザインのインプットができる

こちらの投稿でもインプットとアウトプットを同時進行させると、自分が使える「知識」としてきちんと定着するとあります。

「インプットのコツってあるんですか？」の疑問に的確に答えてくれる本 先日「アウトプット大全」という本を読んだ感想をまとめました。 今回はその対となる本、「インプット大全」についてまとめます。 ...

mito

とても効率的な勉強方法だと思います！

⑤ポートフォリオの作品が勝手に増えている

トレースだとポーフォリオは増やせませんが、この場合は増やせます。
頑張って「ポートフォリオを増やそう」と思って何日もかける必要はありません。
毎日課題に取り組むことで勝手に増えます。

⑥お題ごとにコンセプトやターゲットが決まっている

momo

これを自分で考えようとすると大変でだね〜

Cocoda!はお題ごとに、「誰向け」「コンセプト」「雰囲気」「参考アプリ」が設定されているので、取り組むハードルが低いです。

mito

このように続けられるための補助線がたくさんあるのです！

Cocoda!を実際にやってみた

以下のような手順で進めました。

①本日のお題の確認

このように毎日違うお題が出るので今日のお題を確認します。

②コンセプトやターゲットの深掘り

ノートに書き出し、さらに深掘りしていきます。

③参考になるデザインを探す

イメージを膨らませるためにPintarestやDribbleを使って参考デザインを探します。

④方向性決定

大体の方向性を決めます。

⑤ワイヤーフレームを書く

ノートに手書きでワイヤーフレームを書きます。

⑥Xdを使ってモノクロでデザイン

基本白黒、明度を意識してグレイも使いつつデザインします。

mito

文字の配置や大きさ、色など考える要素が多く頭がごちゃごちゃになったので、まずはモノクロでデザインをすることにしました。

⑦色の明度を変えて強弱や整列などデザインの基本を確認する

色をつける前にデザインの基本を守れているか？を確認します。

⑧色をつけて完成させる

⑨投稿する

Cocoda!内に投稿します。

mito

自分の作品としてポートフォリオに追加されます！

まとめ

インプットとアウトプットを同時進行で行うため、効率的な学習ができるサービスです。

mito

毎日続けることでどんな変化があったのかもこれからまとめていこうと思います！

最近、Xdでデザインをすることが増えました。

XDではじめるWebサイト模写のすすめこんにちは。mito（@mito_works）です。 過去に、デザイン力アップのためにバナートレースをしていましたが、今回は新たに...

そこで今回は、Xdのデザイン時によく使うショートカットキーをまとめます。

mito

Photoshopやillustratorとショートカットキーが少し異なるので慣れが必要だなと思いました。

momo

これさえ覚えておけば便利！という観点でまとめるよ！

基本のショートカットキー

mito

Photoshopやillustratorにも同様の機能はありますが、ショートカットキーが異なる部分もあるので新たに覚える必要があります。

よく使うショートカットキー

こちらにもまとめた内容にいくつか新たに追加しました。

https://twitter.com/mito_works/status/1182286154881585152

momo

ZoomやZoom outはXd独特のショートカットキーだよ！

使いこなすとよく使うショートカットキー

Xdならではの機能としてアセットやプラグインがあります。

それらを使い、レイヤーに戻る時などにショートカットキーを使えると便利です。