Webサイト作成時によく使うサイト&サービス:Webデザインに役立つサイト編

Best Resources for Web Design and Development

どうも~ 火曜になってもやる気ゼロなカテリーナです!Buongiorno!

今回も昨日の続き「カテリーナがWebサイトを作っていて頻繁にお世話になるサイト&サービスのリスト」をご紹介します。

 

やはり自分用のリストなんですが(笑)。

 

 

今日はWebデザインをする上でカテリーナがよく使っているサイトの中でも

「アイコン」「画像作成アプリ」「ワイヤーフレーム」「プレースホルダー」「デザイン・アイディア」のカテゴリーをご紹介します。

 

※ 基本的に全てのサイトは英語です。日本語の場合は注記します。

素材編
Webデザインに役立つサイト
コーディングに役立つサイト
その他お役立ちサービス

WEBサイトを作るときにお世話になっている便利なサイトリスト

Webデザインに役立つサイト編

アイコン
  • Font Awesome: ここはデザイナーから絶大な支持を誇るサイトだと思うんですが。バージョン5からSVGアイコンが出てきました。
  • iconmonstr:  Iconをダウンロードする方法と、Icon Fontとして使う方法があるんですが、わたしは後者です。正直言うとFont Awesomeしか使ってないです。
  • Ionicons: ここは最近見つけたんでまだ使ったことが無いんですけど、CDNがポーンと置いてあってアイコンが羅列してあるだけなので、ある程度慣れた人向けでしょう。すっきりしたアイコンなので、使いやすそうです。
  • Icon Works: こちらも慣れた人向けだと思います。ただ使い方が説明してあるページがあるので、それに従えば大丈夫だと思います。

色々アイコンのサイトはチェックしているんですけど、やっぱりFont Awesomeに出戻ってしまいます。

何と言っても使いやすいんですよねー

画像作成アプリ
  • Photoscape X: オープンソースの画像作成・編集アプリなので当然タダです。でもかなり使いやすく、インターフェースもなかなかなので、手っ取り早く画像を何とかしたい人にはおすすめです。何かの嫌がらせなのか、ブックマーク出来ない設定がしてあるので、こうしてリストにぶち込んでやりますっ!!
  • Tux Paint: めちゃめちゃ子供向けです!!!でも何か気に入っています(笑)。こちらもオープンソースなので当然タダです。
  • GIMP: こちらは非常に有名なアプリですが、やはりオープンソースなのでタダ。機能もとても充実しています。
  • Adobe Photoshop / Illustrator CC: これは説明する必要もないと思いますけど、これまでの3つがタダ、タダ、タダと来ていきなりドドーンと高額。最新版のCCは、クラウドベースで月額払いか年間使用料を一括前払いのようですが、カテリーナは未だにCS6を使っているので正直よく分かりません。Fireworksも持ってますけど、今はほとんど使ってません。
ワイヤーフレーム
  • gliffy: こちらは有料のダイヤグラム作成&オンラインでコラボが出来るツール。 個人で使う場面はあまりないのが正直なところですが。
  • Wifify:  これはめちゃくちゃ面白いサイトというかツールです。これを使えば現にオンラインで公開されているどのWebサイトもワイヤーフレームに変換してくれる。 例えば個人的にとても気になるデザインのWebサイトのワイヤーフレームをある意味手に入れることが出来たりするわけです。無料プランだと保存が出来ないのは仕方ないですね。
  • Wireframe.cc: ある程度ノート上などでラフスケッチが固まっている場合、このツールでポンポンッとワイヤーフレームを作ることが出来てめちゃくちゃ便利です。わたしはこのサイトを同時に開いてチェックしながらコーディングしています。そうすると頭の中のデザインとほぼ同じものが出来てくる確率が上がります。
プレースホルダー
  • Blend Text Generator: 俗に言う「Lorem ipsumなんちゃら」をこちらが指定する通りに作ってくれるツール。パラグラフの数とか文字数、<p>タグあり・なし等を指定してあとはHTMLファイルにコピペするだけです。
  • Bacon Ipsum: 上と似たような感じなんですが、ここは「肉々しいバージョン」で、すっごく下らないです。でもその下らなさが気に入っています!
  • Placehold.it: もうしょっちゅう使ってます。以上!
  • Lorempixel: ここのプレースホルダーはランダムな画像を表示してくれて、ユーザーとしては楽しいので使いたいのはやまやまなんですが、

    遅い 重い 表示されない

    せいで毎回超絶イライラさせられるので、上のPlacehold.itで妥協してしまってます。
デザイン・アイディア
  • goodui.org: ここはユーザー(Webサイトに来てくれるお客様)にとって居心地がいいWebサイトになる鍵となるUI(ユーザー・インターフェース)を良くするための75のアイディアが分かりやすく説明してあるで、めちゃめちゃ役に立ちます
  • Call to Idea: ランディングページ、404、ナビゲーションなど項目別に様々なサイトが整理してあって、何か自分では思いつかないようなアイディアが欲しくなったり、コーディングのし過ぎで疲れたりしたときにボーっと眺めてます。


素材編
Webデザインに役立つサイト
コーディングに役立つサイト
その他お役立ちサービス

Webサイトデザインをする時に役に立つ素材サイトまとめ

今回は、Webデザインに役立つサイト編の「アイコン」「画像作成アプリ」「ワイヤーフレーム」「プレースホルダー」「デザイン・アイディア」に関するサイトリストをお届けしました。

 

デザイン・アイディアのリストを整理していて思ったのが...

ココ・シャネルのような先駆者はともかくデザイナーで他人のマネをした事がない人っていないと断言できる。あ、「パクリ」とは違いますよ、パクリとは。

 

パクリっつうのはこういうものです ☞ 「メイソー」

 

他人のアイディアを拝借し、自分なりに理解して、自分のアイディアを加え改良する。これってまさに日本の自動車産業や家電業界がやって来たことだし、クリエイター全員が絶対に他人のマネをしないんだったら2018年のWebデザイントレンドとか出てくるはずがない。

あと、コーディングだと他人のコードをガンガン真似するのがめちゃくちゃ勉強になりますからね。

わたしのゴールは作品やコードを見ただけでカテリーナが作ったって一目瞭然なレベルに到達すること。

ええ。コード界のフェラーリを目指します!!

 

よく分からないことばかり書いててアレなんで、もうやめようと思います(爆

次回は「コーディングで役に立つサイト編」をお届けします。

 

それではここまで読んでいただいてどうもありがとうございました!

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.