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

HTML&JSなど画面まわり&サーブレット小ネタ

サーブレットでアプリ作ってますが、画面まわりに関していろいろいじっているのでそこら辺のネタなんかを。 Contents1 テーブルの結合2 JSPでの動的HTML→POSTで認識できない3 動的プルダ …

no image

boostrapでのヘッダーナビ作成

昔から私の作るWEBアプリはデザインがめちゃくちゃなことが多かったんですが、最近は多少デザインにも気を配るようになってきました。 実はCSSがあまり得意ではなくて、うまく組むためにかなり苦戦していまし …

no image

ページレイアウトに関して

今回からは単一のページレイアウトの構成の考え方やテクニックについて。 一般的な傾向として、人間の視覚上の特徴というのは下記のような傾向があげられます。 人の視線は上から下、左から右へというのがディフォ …

no image

破綻しないCSSについて

業務では開発する人間があまりおらず、プログラム以外にもデザイン(CSSなどのレイアウト)やらサーバーやら一人ですべてやることが多いです。 CSSなんかは最初に触ってから4,5年は立ちますけど、系統的に …

no image

css小ネタ

実務でCSSをゴリゴリ書く機会があり、力不足を感じたので、メモを。 ライブラリlessやsassを使うとスコープを設定できるのでかなり楽 大まかな幅設定 スマホデザインの場合、幅を基本的に%で指定。p …