アルタ公式ページ

Alta Facebook

Facebookの軌跡

いいねランキング(直近30日)
1位:
25
【内定式動画、完成!】 2017年10月28日に開催した内定式の動画が完成しました! * 皆さま是非一度ご覧...
2位:
25
【内定証書授与式第2弾!?&本日のおやつ】 2017.11.10☆ 10月28日に行った内定式の際にハワイから中継で...
3位:
25
【展示会に出展いたしました!】 2017.11.08~2017.11.09☆ * 先週の水曜と木曜の2日間、名古屋市西区 b...
どうも。へっぽこプログラマ丸山です。

シリーズでお伝えしてきた「scss」も今回で最終回となりました。

【シリーズ】CSS拡張メタ言語 scss,lessのちょっと便利な使い方
No5:Operators 四則演算を使ってみよう。

スタイルシートでレイアウトを組むとき、
全体の横幅からブロック要素の横幅を引いて・・と計算をするシーンはよくあります。

そこでレイアウトの調整が入ったとき、また再計算をさせたり、
崩れが発生するまで再計算の必要性に気づかないケースが出てきます。

ならば最初から計算式でスタイルシートを書いてしまったほうが安全です。

//全体の横幅
$container : 950px;

.container {
width: $container;

.main {
float : left;
width: $container * 30 / 100;
}

.navi {
float: right;
width: $container * 70 / 100;
}
}

↓コンパイル↓(--style expanded)

.container {
width: 950px;
}
.container .main {
float: left;
width: 285px;
}
.container .navi {
float: right;
width: 665px;
}

元となる数値から、子供要素の計算式で作っていけば、細かな調整にも耐えれる安全なソースが書けます。

以上、シリーズでお伝えした「scss」ですが、ご興味がわいたでしょうか?

一度scssを使い始めると、スタイルシートを書くのに手放せない存在になってきます。
これを期に、少しでも皆様のお役に立てればと思います。
一眼がほしいと思っていたはずが、コンデジを買ってしまったひよっこデザイナーの小林です。

さて、本日のテーマは「ai(psd)だってサムネを見たい2」

前回、「ai(psd)だってサムネを見たい」と題しまして、「Sagethumbs」と「Ghostscript 8.54」をご紹介いたしました。

その際、コメントで素敵なものを教えていただきましたので、調べてみました!

Ardfry PSD Codec
http://www.ardfry.com/psd-codec/

こちらはWindowsのエクスプローラー、フォトビューワーなどでpsdが見えるようになるプラグインです。

シェアウェアです!

psd, eps, ai,などに対応している模様。

Windowsは8まで、32bit版も64bit版も対応です。

フォトビューワーに対応しているのは、魅力的ですね。

また、キャッシュの具合もArdfryのPSDコーデックは快適だそうで、ファイルサイズの大きいai,psdでも、サムネイルやプレビューが快適表示されるとか。

参考:http://narukiya.fc2web.com/ (2013/03/16の記事)

日本語での情報が少ないのですが、15日間のトライアルを試してみるのも良いかもしれませんね!
こんにちは、得意なスポーツはドッジボール(外野のみ)のデザイナー・尾関です。
会社で運動会みたいなことをやってみたいです。

突然ですが、フォトショップには便利な機能が満載です。ショートカットを活用してる方が多いかと思います。
作業をする中でも、とても便利だと思ったショートカットをご紹介します。
意外と知らない方が多いのではないかと思いますので、これを機に知ってもらえればと思います。

-------------------------------
・ブラシのサイズの変更
[Macの場合]
ctl + option を押しながら左右にドラッグ
[Windowsの場合]
alt を押しながら左右に右クリックしながらドラッグ

-------------------------------

・ブラシのぼかし変更
[Macの場合]
ctl + option を押しながら上下にドラッグ
[Windowsの場合]
alt を押しながら上下に右クリックしながらドラッグ

-------------------------------

・クリッピングマスクの作成
[Mac/Windows共通]
レイヤーとレイヤーの間を alt + クリック

-------------------------------

・選択範囲を作成中に移動
[Mac/Windows共通]
選択範囲を作成中に Space + ドラッグで移動

-------------------------------

他にもありますが、多いのでここまでで区切りとします。
これだけでも作業効率が一気に上がると思います。ぜひ、ご活用ください!
こんにちはデザイナーの遠山です。

今回は、WardやExcelに貼り付けられている画像を簡単に取り出す方法をご紹介いたします。

Word2010からは文書内にある画像を解像度そのままでファイルとして保存する機能が追加されましたが、Word2010以前では使えない方法ですし、量が多い場合は一個一個保存するのがとても手間です。

そんなときはWordやExcelファイルの拡張子を変えてしまいます。
「.docx」や「.xlsx」を「.zip」に変更するだけ。
解凍して中を見ると、「media」フォルダ内に画像ファイルがまとまっています。
WordやExcelでファイルを開く必要もないのでとても便利!

ちなみにこの方法は、WordやExcel、PowerPointなどのファイルのうち、拡張子の最後に「x」が付く、「.docx」「.xlsx」「.pptx」などで使えます。
それ以前のファイル形式では一度Office2007以降のバージョンでファイルを開いて、「.◯◯◯x」のファイル形式で保存する必要があります。
こんにちは、社員全員にうさ耳を付けてみたいと考えているデザイナーの尾関です。
私の自己満足で終わるというオチが丸見えです。

ちょっと面白いジェネレーターがありましたのでご紹介します。
それは、あの企業っぽいロゴを作成してくれるジェネレーター『FunnyLogo』です。入力した文字をGoogleとかYahooとかその他有名企業のロゴに似せて作成してくれます。
遊び心で色々作成してみました。面白かったです。
http://www.funnylogo.info/create.asp

他にもいろんなジェネレーターがありましたのでアルタで作成してみました。

他の企業のロゴに違う言葉を当てはめてみたり、企業と企業のロゴカラーを入れ替えてみるなど、一見何にもないようなことを試してみるのも新たな発見があるかもしれませんね。
私は、アルタをアニメ風のロゴにしたことで「これいいかも!」と、一人で気分があがりました。
バズって?

プログラマーの斎田です。
インターネットをしていると最近良く聴く言葉があります。

バズワード、あるいはバズる、です。

このバズとはなんでしょう。

これは英語の「Buzz」だそうで、
うわさする、口コミといった意味があるそうで、
主にSNSでのうわさをさすようです。

SNSで人気のあるワードでマーケティングを行うことを
バズ・マーケティングというそうで、
このバズをよく聞くようになったのは
SNSを利用したマーケティングが広がってきたというのもあるのかもしれません。

SNSはmixiで大きく広まってからtwitter、そしてFacebookと、様々なサービスがでてきました。
SNSは今ではマーケティングでは重要な位置にきていると思います。

バズワードをいち早くキャッチすることで、
他の人より一足先にいけるかもしれません。
バズワードには目が離せませんね。
こんばんは!スマートフォンの普及を電車内で感じる宮田です。

今回のテーマは、挨拶にも出てきましたスマートフォンのお話です。
スマートフォンが増えてきた事によって、最近はある問題が深刻化してきています。

皆さんも見かけた事があるかもしれません、「歩きスマホ」です。
歩いたままスマートフォンを操作する事を指すこの行為ですが、多くの危険性を孕んでいます。
駅のホームへの転落や、他の人との衝突、女性の場合は痴漢の被害に遭う等、命に関わる物まであります。

歩きスマホ中の視野は通常時の20分の1になると言われており、前方不注意になりがちです。
更にそこへイヤホンを装着していると、周囲の状況を把握せずに歩いているようなものです。
事故が起こりやすくなるのは容易に想像がつきます。

私も全くないとは言えないので、その戒めも込めて、今回の記事を書かせて頂きました。
携帯電話の時はここまで大きな話になったような気はしないのですが…。
携帯電話よりスマートフォンの方が手放せない存在になっているという事なのでしょうか。

皆さんも心当たりのある方は、歩きスマホをしないよう意識してみては如何でしょうか?
どうも。へっぽこプログラマ丸山です。

引き続きシリーズでお伝えする「scss」のお話です。

【シリーズ】CSS拡張メタ言語 scss,lessのちょっと便利な使い方
No4:Mixins 再利用まとめてスタイルを制御

例えば、コーナーRやアニメーション制御のtransitionなど記述が単調で面倒な場面は多くあります。
そこで、CSSを関数のように扱うととても楽ちんです。

//コーナーR用Mixin
@mixin border-radius($radius) {
 -webkit-border-radius: $radius;
   -moz-border-radius: $radius;
   -ms-border-radius: $radius;
     border-radius: $radius;
}

.box { @include border-radius(10px); }

↓コンパイル↓(--style expanded)

.box {
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -ms-border-radius: 10px;
 border-radius: 10px;
}

このmixinを使えば、例えば5pxのコーナーRを書きたいときは
.box2 { @include border-radius(5px); }

4行の記述を1行で終わらせることができちゃいます。

ここっていつも繰り返し使っているよなーとか思う部分をmixinに収めてしまえば、コードも読みやすくなり入力の手間が大幅に削減できます。
ちょっと難しいかもしれませんが、ぜひチャレンジしてみて下さい!

次回は最終回「Operators 四則演算を使ってみよう」をお届けします。
こんばんは!眼鏡のブルーカットが実感できない宮田です。

今回は面白いデバイスを見つけてきたのでご紹介します。
次の説明を聞いて、少しデバイスの形を想像してみて下さい。

ラップトップ(大雑把に言えばノートパソコン)であり、
タブレットであり、
携帯電話であり、
Windows8.1マシンであり、
Androidデバイスでもある端末。

…さて、どんな端末を想像するでしょうか。
私も写真無しにイメージする自信はありません。

そんな不思議デバイスの名前は「Asus Transformer Ⅴ」(エイスース トランスフォーマー ファイヴ)。

ディスプレイの裏側にスマートフォンが装着されている、キーボード付きタブレット。
文章で表すならこんな感じでしょうか。

-------------------------------------------------------
ラップトップ(大雑把に言えばノートパソコン)であり、
タブレットであり、
Windows8.1マシンであり、
-------------------------------------------------------
この部分をタブレットが担当し、

-------------------------------------------------------
携帯電話であり、
Androidデバイスでもある端末。
-------------------------------------------------------
この部分を裏側にくっついているスマートフォンが担当する…と。

まだ発売されていないこの端末ですが、どのような使い方が考えられるでしょうか。

大きな画面でスマホアプリができ…る手段は他にあるし…。
デバッグ用…に使える?…??

私の固い頭では、この「Asus Transformer Ⅴ」の真の性能を引き出す事が難しいようです。
皆さんも何かアイディアが浮かんだら教えて下さい!
どうも。へっぽこプログラマ丸山です。

今回も引き続きシリーズでお伝えする「scss」のお話です。

【シリーズ】CSS拡張メタ言語 scss,lessのちょっと便利な使い方
No3:Partials パーツ管理しよう

スタイルシートをがっつり書いていくと
ソースが長くなって可読性が悪くなってきたりします。
また同じ意味のソースがあっちにこっちにも散らばったり管理が煩雑になります。

そこで目的ごとにパーツを管理したほうが楽です。

例えば
_forms.scss
_navs.scss
_tables.sccc

このようにパーツごとのファイルを作っておきます。

$primary : #428bca; //メインカラー

@import 'forms';
@import 'navs';
@import 'tables';

シリーズNo1:Variablesでお伝えしたように変数を併用すれば
ファイルがバラバラになろうとも、共通のルールで全ファイルを管理できます。
上記の例ではメインカラーを軸にそれぞれのパーツを起こします。

メニュー用、フォーム用、テーブル用・・etc

これらのパーツファイルを管理しておけば、使いまわしも楽になります。

最近では、javascriptライブラリにscssが含まれている物も増えてきました。
付属のCSSをそのまま入れるよりscssでサイト全体の調和を崩さない事ができます。

次回は「Mixins 再利用まとめてスタイルを制御」をお届けします。
こんにちは、デザイナーの村木です。
スマホのアプリゲームで昔懐かしいドット絵をよく見ます。
ドットの強みをまとめるなら下記のことが言えます。

1.イラストが描けなくても作成可能である。
2.ファイルサイズが小さく、PNG形式と相性が良い。
3.開発機材が安い。

とはいえ、作るとなると地道な作業の繰り返しで
非常に時間がかかり、精神的にきついというイメージ。

そこで、Photoshopによる裏ワザ的手法にチャレンジしたいと思います!

↓下記の記事を参照しました。
■ドット絵描く楽な方法見つけた!気がする
http://design.kayac.com/topics/2012/02/post-47.php

素材は、フリー素材のにゃんこから(http://www.pakutaso.com/)
記事ではイラストから起こしていますが、写真からドット化してみます。

――結果は画像の通りです。
ざっくり影をなぞっただけですが、
それっぽく見えるのではないでしょうか。
デフォルメしたり、キャラクターを動かしたい場合は、
ちゃんとしたイラストからドット化した方がよいでしょう。
所要時間は約1時間。

王道手段とは言いがたいですが、
キャラクターを大量生産する場合などには、有効な手段だと思われます。
どうも。へっぽこプログラマ丸山です。

前回に引き続きシリーズでお伝えする「scss」のお話です。

【シリーズ】CSS拡張メタ言語 scssのちょっと便利な使い方
No2:Nesting 入れ子で書いてみよう

HTMLコードは入れ子構造で
例えばヘッダーの中にメニュー
メニューの中に項目
項目の中にリンク
・・・
・・・
といったように入れ子構造に配置していきますが、
スタイルシートだって同じように書けた方が楽です。
scssを使えば以下のような書き方ができます

div#header {
 ul {
  margin: 0;
  padding: 0;
  list-style: none;

  li {
   display: inline-block;

   a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
   }
  }
 }
}

↓コンパイル↓(--style expanded)

div#header ul {
 margin: 0;
 padding: 0;
 list-style: none;
}
div#header ul li {
 display: inline-block;
}
div#header ul li a {
 display: block;
 padding: 6px 12px;
 text-decoration: none;
}

パーツの中にパーツを書いていくので直感的でパンチ入力も少なくて済みます。
構造の変化があったときも対応が楽になり、汎用性が高く安全なソースが維持できます。

一回使い始めると、とても入力が楽で、CSSを生で書きたくなくなるぐらい便利です。

次回は「Partials パーツ管理しよう」をお届けします。
こんばんは!最近Facebookを書けてなくてごめんなさいな宮田です。

今回は次世代端末と言われるウェアラブルPCの代表格である「Google Glass」のお話です。

未だアメリカでしか発売していないGoogleGlassですが(並行輸入販売は除きます)、日本での発売に一歩進みました。
日本で無線通信機器を利用する為の大きな壁、『技術基準適合証明』(以下:技適)の審査を通過した為です。
この技適を取得するのに掛かる費用は、日本円で数百万と言われています。
Googleが何らかの実験目的で技適を取得している等の穿った見方をしなければ、日本でのGoogleGlass販売の準備を進めていると見るのが順当でしょう。

うまくいけば年内に発売も!
と書いてある記事もありましたが、果たしてどうなるんでしょう。
今後の情報から目が離せませんね!

ちなみに、アメリカで発売されているGoogleGlassのお値段ですが、興味本位で買うには少しお高いお値段だったりします。
お値段なんと…『1,500ドル(税別)』!
日本円で言えば約150,000円ですが、中古車が買えてしまいますね。

日本では一体いくらになるのか…、こちらも目が離せませんね!
それではまた次回、お会いしましょう!
どうも。へっぽこプログラマ丸山です。

CSS拡張メタ言語「scss」の使い方をシリーズでお伝えしたいと思います。

これからscssを使ってみる方、
使ってみたけどよくわからなかった方、
または、scssを知らなかったけどこれがきっかけで興味を持っていただけたら幸いです。

【シリーズ】CSS拡張メタ言語 scssのちょっと便利な使い方
第一回:Variables 変数を使ってみよう

サイトのメインカラーを1色決めて、
そこからCSSパーツを当てはめながら作成すると、手間が大幅に削減できます。

言葉に置き換えると
サイトのメインカラーはこの色だから・・
リンク色はこの色を使って、
マウスオーバーはそれよりちょっと濃くして
ボタンはメインカラーを背景色にして・・

このような基準になる色からあれこれパーツを作るとき、
Variablesの威力発揮です。

今回はこの変数(Variables)を使って具体的にその例を書いてみます。

@charset "utf-8";

//---------------------------
//メインカラーを決めます
$primary : #428bca;
//---------------------------

//---------------------------
// テキストリンク
//---------------------------
//テキストリンクはメインカラーを10%濃くします
a {
color: darken($primary,10%);
}

//テキストリンクにマウスを乗せた場合20%濃くします
a:hover{
color: darken($primary, 20%);
}

//---------------------------
// ボタン
//---------------------------
//背景色にメインカラーを使い、縁取りは20%薄い色にします
button {
color: #333;
background-color: $primary;
cursor: pointer;
border: 1px lighten($primary,20%) solid;
}

このような感じでメインカラーからパーツをそれぞれ作っていけばサイト全体の統一が一気にとれて管理が楽になります。

ちなみに上記のコンパイル(--style expanded)結果

a {
color: #3071a9;
}

a:hover {
color: #245682;
}

button {
color: #333;
background-color: #428bca;
cursor: pointer;
border: 1px #92bce0 solid;
}

sassがメインカラーを当てはめならがら色の計算までしてくれています。

次回は「Nesting 入れ子で書いてみよう」をお届けします。
美術館に行くところからはじめた、ひよっこデザイナーの小林です。

さて、本日のテーマは「ai(psd)だってサムネを見たい」

皆さんはどうしていますか?

ダウンロードした素材や、とりあえず作成したファイルの名前。


意味の薄い英数字の羅列のファイル名になっていることはありませんか?

私は、よくあります。

「a0006.ai」とか……
「AJ007.psd」とか……

pngとかjpgなら、ファイル名でわからなくてもダメージが少ないのですが、psdやaiの場合ファイル名から内容が判別できないとダメージが甚大。

せめて、サムネイルが見えれば、イラレやフォトショで開きまくる時間が短縮できるのでは……?
(Bridgeを使えばいいじゃん、といわないで……っ)

そう思って調べました!

今回ご紹介するのは、「Sagethumbs」と、「Ghostscript 8.54」。

参考:
[WindowsでIllustrator・Photoshopデータをサムネイル表示させる方法]
http://success.tracpath.com/blog/2014/03/05/windows%E3%81%A7illustrator%E3%83%BBphotoshop%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E3%82%B5%E3%83%A0%E3%83%8D%E3%82%A4%E3%83%AB%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%95%E3%81%9B%E3%82%8B%E6%96%B9%E6%B3%95/

Sagethumbsを導入すると、どうやらとりあえずpsdのサムネイルが見えます。
psdだけで大丈夫な人は、Sagethumbsだけで大丈夫。

aiのサムネイルも見たいとなるとGhostscriptが必要なようです。

photoshopなどの使用状況によっては、初期設定ではほとんどサムネイルが表示されない、なんていうこともあるかも。

サムネイルを表示させる上限のファイルサイズの設定も、あとからできます。

私は、100MBまでのファイルはサムネイルが表示されるように設定して、試し中です。

※スペックの低いPCだとつらいと聞きますので、そのあたり気をつけて導入してくださいね。

シェアウエアでも「MysticThumbs」なるものソフトで、サムネイルが表示できるそうですので、自分の環境に合わせて検討してみてはいかがでしょうか!

P.S.

検索性の問題から、やっぱりわかりやすいファイル名をつけたほうが良いのでは、と思います!
道具を使う側なのに使い方がわからず道具に使われているなんてことは避けたいもの。

プログラマーの斎田です。

iphoneのメモ帳はgmailと同期ができるという話を今回はします。

iphoneにはメモ帳機能が標準で備わっていますが、
gmailの設定をすることでgmailで、メモをしたことを確認することができます。
出先で軽く文章を作って、戻ってきたらパソコンで作成したり、
連絡しなければならないことを書いておくことで、gmailを開いたときに確認し、ミスを減らすなんてことも。

その使い方ですが、
iphoneで

設定>メール/連絡先/カレンダー

で、gmailのアカウントを設定し、そこにあるメモをONにするだけです。

こうすることで、iphoneのメモ帳で入力したものが、
gmailのNotesフォルダに追加されていきます。

うまく活用して効率を上げていきたいところです。
こんにちは、デザイナーの村木です。
職種に限らず、プレゼンを通すことは避けられない道となります。
便利なことにネット上には、綺麗な提案書を作るための記事が多々あります。
どれも最終結論は、シンプル・イズ・ベストになるのですが、
そうなるにはどうすればよいか、
共通テクニックを5点にまとめてみました。

■フォントは18~30ptのメイリオが安定
文字サイズが12ptでは、遠くからだと何が書いてあるのか分かりません。
諸説ありますが、最低でも18pt以上にしましょう。スクリーンならば24pt以上説が多数あります。
また、太文字に対応しているメイリオ、Macならヒラギノ角ゴ設定にしましょう。

■使用する色は少なく、ルール化する
色が多すぎると大事な情報が分かりにくくなります。
色数は出来るだけ少なく、使い方は統一しましょう。
使用する色は、ベースカラー、メインカラー、アクセントカラーの3色程度に絞りましょう。

■適切な改行・行間の調整
言葉の塊を意識して、文章を読みやすい位置で改行しましょう。
余白があるとキレイに見えるので、行間やオブジェクトの配置も意識しましょう。
行数は6~7行が限度になります。

■やり過ぎに注意
エッジを強くすると読みにくくなります。
テキストの強調もやり過ぎると非効果的になります。
相手に伝えることが大前提なので、アニメーションも必要最低限にしましょう。

■スライドに全てを書かない
プレゼンシートが文字だらけで、読めば内容が分かるものでは、話に広がりがありません。
本当に必要な要点だけ、簡潔なメッセージを書き入れましょう。
大事な情報はあなたの言葉で語りましょう。

以下、参考にしたまとめ記事になります。
述べた内容に加え、より詳細なレイアウトや構成なども掲載されているます。
お時間のある方は目を通すことをオススメします。

・週末に一気にプレゼンの極意を学べる良記事、スライド、動画まとめ
http://flipsblog.jp/archives/265
・読むだけでプレゼン力が格段に上がる!良質スライド&記事のまとめ15選
http://www.find-job.net/startup/know-how-of-presentation
・デザイン・レイアウトで伝わる!プレゼン資料
http://ppt.design4u.jp/
・【プレゼン】見やすいプレゼン資料の作り方【初心者用】
http://www.slideshare.net/yutamorishige50/how-to-present-better
こんばんは。
上野です。

さて、我らがSurfaceはついに3:2のディスプレイを
獲得するようです。3:2ディスプレイはB6見開きを読むのに
非常に適している、という話を読みました。

そしてそこには色々な縦横比のディスプレイが。

そこで思いました。いったいどのディスプレイが一番
広いのだろうか。

1インチm:nのディスプレイの面積を考えます。
ディスプレイは長方形なので対角線で切ると
直角三角形になります。

なので面積を計算するとmn/(m^2+n^2)と
なります。

(m, n)を(4, 3), (16, 9), (16, 10), (3, 2), (5, 4)と
してmn/(m^2+n^2)に代入してみるとそれぞれ四捨五入して
0.48,0.43,0.45,0.46,0.49となります。

同じ型のディスプレイならば4:3や5:4が一番広い、と
いうことになりますね。尤も、広さだけが全てでは
ありませんから、単純に比べるわけにも参りませんが。

それでも広いと何となくお得感がありますね。