skillup

技術ブログ

UI デザイン

UIまで手が回らないプログラマのための画像加工サービス&ツール紹介など

投稿日:2015年11月12日 更新日:

本業はプログラマ―なんですが、ガチンコ塾のブログの画像を作る程度の加工などをちょこちょこやってます。

プログラマーといえどUIを全く気にしないのは問題ですし、中小企業だと広く浅くできる人間が求められるのでデザインも少しだけ勉強しています。

フォトショとかイラレをがっつり使っている方はこのページを見る必要はないです(笑)

あくまで手軽で簡単に扱えるツールの紹介をします。すべてフリーです。

Bootstrap

http://getbootstrap.com/

超有名ですね。

お手軽にきれいなページが作れるCSSフレームワークです。

私もこれでランディングページを作成したところ、お手軽かつ簡単にそこそこのページを作ることができました。有名どころなんでいろんな解説ページがあるのがうれしいです。

GIMP

http://www.gimp.org/

フォトショの代替といわれていますが、個人的には

  • フォント関連の機能が充実していない(表示が見にくい、動的に変更の様子を一覧できない)
  • 各種エフェクトがいちいち実行しないとわからない
  • 文字のレイヤーがつかみにくい

というのが難点です。

fotor

http://www.fotor.com/jp/

簡単なコラージュの画像などを簡単に作れるウェブサービス。

とはいえ、こったものは有料でないと難しいようです。

pixlr.com

https://pixlr.com/editor/

WEBで使えるフォトショの簡易版みたいなものですかね。

昔、フォトショを使っていましたが、簡易的な機能だったら大体備わっているなーという印象。

個人的には「レイヤースタイル」で文字の縁取りなどが簡単にできるのがおすすめ。

GIMPと併用してますが、こっちのほうが使えるなーという印象です・・・

上達のコツ

  • ネットサーフィンで自分が作りたいもののイメージを探すこと
  • その画像に合わせてどうやったら近づけられるかを考えること(もちろん完全に同じものは意味がないです。)
  • 最初はできるだけ簡単なものから試すこと(バナーとかブログの1枚の画像など)

ダメな学習法

  • 本とかをみて頭から全部のテクニックを身につけようとすること

ここらへんはプログラムの勉強と少し似ているかも・・・

参考にしたリンク

非デザイナーエンジニアが一人でWebサービスを作るときに便利なツール32選

-UI, デザイン
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

BrowserSyncを使ったホットリロードに関して

BrowserSyncを使ったブラウザのホットリロードに関して。 ホットリロードとは「エディタなどで更新があった際にブラウザがすぐに検知して、最新の状態に自動更新してくれる」状態にブラウザをすることで …

no image

レスポンシブデザインの作成ポイント

本日はレスポンシブデザインの表現方法について。 スマホでは何も指定しなければブラウザはウェブサイトの幅が980pxと仮定しています。 要は通常の980px分をそのままiPhoneの画面に収まるよう縮小 …

no image

ブラウザ上でのドラッグ&ドロップの処理

あるシステムから別のシステムにデータを移すとき、一般的にはCSVを使うことが多いかと思います。 今携わっているシステムもそうなのですが、CSVのどの項目を選ぶかを変更したいときってありますよね。 以前 …

no image

transition関連

cssのanimationに関して。 例えばhoverしたときに色が変わる仕様はよくあることだと思いますが、transitionを入れることで時間差をつけることができます。 [crayon-61b1d …

no image

アクションとコマンド

今回はインターフェイスにおける動詞、つまりは「なんらかの行動(新規作成、表示、編集、削除)」についての解説です。 なんらかの行動に関してはほとんどのアプリケーションでボタンで実行されることが多いのでは …